/* ==========================================================================
   2026 메인 리뉴얼 — PC 헤더 메뉴 추가분
   (Figma: 헤더 351:6325 · 하단 뎁스 메뉴 351:6423)

   레거시 CSS(무수정 원칙) 뒤에 로드된다. 기존 헤더 구조·모바일(≤1025px)·
   전체화면 햄버거 메뉴는 그대로 두고, 아래만 담당한다:
   - PC 헤더 GNB(.hd26_gnb) + 호버 뎁스 메뉴(.hd26_sub)  [신규 추가]
   - 로그인/회원가입 필 버튼 · 햄버거 원형 버튼 시안 적용  [PC 한정 재스타일]
   - PC 헤더 배경 블랙 70% + blur(10px)
   ========================================================================== */

/* 리뉴얼 전용 요소 기본 숨김 — PC(>1025px)에서만 노출 */
.hd26_gnb,
.hd26_sub,
.logo .ico_renewal,
.log_ico .ico_renewal,
.ham_ico_menu,
.ham_ico_x {
  display: none;
}

@media screen and (min-width: 1026px) {
  /* ── 헤더 배경: 기본 블랙 30% + 블러 (blackbg-30) ──
     페이지별 CSS(main.css 등)가 renewal.css 보다 나중에 로드되므로
     header.header 로 특이도를 한 단계 올려 header:hover / header.v2·v3 를 이긴다. */
  header.header,
  header.header:hover,
  header.header.v2,
  header.header.v3,
  .v4 header.header {
    background-color: rgba(0, 0, 0, 0.3);
    border-bottom: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  /* 메뉴 열림(뎁스 메뉴 호버 or 전체화면 햄버거 메뉴) 시 블랙 70% (blackbg-70) */
  header.header.gnb_open,
  html.ham_on header.header {
    background-color: rgba(0, 0, 0, 0.7);
  }
  /* 배경이 항상 어두우므로 v2(밝은 섹션) 반전 무효화 (main.css invert(1) 재정의) */
  header.header.v2 .logo,
  header.header.v2 .kor_logo,
  header.header.v2 .right_group {
    filter: invert(0);
  }

  /* ── 헤더 치수: 시안 96px 높이 · 콘텐츠 좌우 72px ── */
  header .header_con {
    height: 96px;
    width: calc(100% - 144px);
  }

  /* ── 로고: 시안의 조합 로고 1개만 노출 (기존 영문 엠블럼·한글 로고 숨김) ── */
  .logo {
    width: auto;
  }
  .logo .ico_legacy {
    display: none;
  }
  .logo .ico_renewal {
    display: block;
    width: 130px;
    height: 64px;
  }
  .kor_logo {
    display: none;
  }

  /* ── PC GNB (헤더 인라인 메뉴) ── */
  .hd26_gnb {
    display: flex;
    gap: 48px;
    align-items: center;
  }
  .hd26_gnb_item {
    cursor: pointer;
    transition: 0.3s;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: #fff;
    white-space: nowrap;
  }
  .hd26_gnb_item:hover {
    color: #d9d9d9;
  }

  /* ── 로그인/회원가입 필 버튼 (기존 마크업 재스타일) ── */
  header .right_group {
    gap: 12px;
  }
  header .right_group .login_group {
    background-color: #fff;
    border-radius: 140px;
    padding: 4px 20px 4px 4px;
    gap: 8px;
    color: #161b24;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.03em;
  }
  header .right_group .login_btn {
    gap: 8px;
  }
  .log_ico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .log_ico .ico_legacy {
    display: none;
  }
  .log_ico .ico_renewal {
    display: block;
    width: 24px;
    height: 24px;
  }

  /* ── 햄버거 원형 버튼 (기존 마크업 재스타일, 동작 동일) ── */
  header .right_group .ham_group {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.8);
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  header .right_group .ham_group .ham_bar {
    display: none;
  }
  .ham_ico_menu {
    display: block;
    width: 24px;
    height: 24px;
  }
  /* 전체화면 햄버거 메뉴 열림 시 흰 원 + X 아이콘 (시안 351:6325 열림 상태) */
  html.ham_on header .right_group .ham_group {
    background-color: #fff;
  }
  html.ham_on .ham_ico_menu {
    display: none;
  }
  html.ham_on .ham_ico_x {
    display: block;
    width: 24px;
    height: 24px;
  }

  /* ── GNB 호버 뎁스 메뉴 ──
     header 의 형제로 렌더 (header 자식이면 backdrop-filter 블러가 무효화됨) */
  .hd26_sub {
    display: block;
    position: fixed;
    top: 96px;
    left: 0;
    width: 100%;
    z-index: 998;
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 0 0 120px 120px;
    padding: 32px 0 64px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    /* 부드러운 등장/퇴장 — visibility 는 페이드가 끝난 뒤 감춰지도록 함께 전환 */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out,
      visibility 0.4s;
    pointer-events: none;
  }
  .hd26_sub.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .hd26_sub_inner {
    display: flex;
    gap: 24px;
    justify-content: center;
  }
  .hd26_col {
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hd26_col_tit {
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: #d9d9d9;
    /* 제목은 항상 한 줄 — 컬럼별 + 아이콘 높이를 동일하게 유지 (시안 351:6424) */
    white-space: nowrap;
  }
  .hd26_col_plus {
    margin-top: 20px;
    width: 12px;
    height: 12px;
  }
  .hd26_col_plus img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .hd26_col_plus .plus_on {
    display: none;
  }
  .hd26_col:hover .hd26_col_tit {
    color: #fff;
  }
  .hd26_col:hover .hd26_col_plus .plus {
    display: none;
  }
  .hd26_col:hover .hd26_col_plus .plus_on {
    display: block;
  }

  .hd26_col_list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .hd26_col_item {
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: #d9d9d9;
  }
  .hd26_col_item:hover {
    color: #fff;
  }
  .hd26_note {
    display: block;
    font-size: 14px;
    letter-spacing: -0.03em;
  }
}

/* 1026~1550px: 축소 대응 */
@media screen and (min-width: 1026px) and (max-width: 1550px) {
  .hd26_gnb {
    gap: 24px;
  }
  .hd26_gnb_item {
    font-size: 17px;
  }
  .hd26_col {
    width: 124px;
  }
  .hd26_sub_inner {
    gap: 16px;
  }
  .hd26_col_tit {
    font-size: 17px;
  }
  .hd26_col_item {
    font-size: 15px;
  }
  .hd26_note {
    font-size: 12px;
  }
}

/* 1026~1250px: 로그인 텍스트 숨김 등 추가 축소 */
@media screen and (min-width: 1026px) and (max-width: 1250px) {
  .hd26_gnb {
    gap: 16px;
  }
  .hd26_gnb_item {
    font-size: 15px;
  }
  header .right_group .login_group {
    padding: 4px;
  }
  header .right_group .login_group .log_txt,
  header .right_group .login_group .non_bar,
  header .right_group .login_group .reg_btn {
    display: none;
  }
  .hd26_col {
    width: 112px;
  }
  .hd26_sub_inner {
    gap: 12px;
  }
}