/*
    헤더 공통 CSS

    관리 기준:
    - 기존 Cafe24 헤더 구조(#header, .topArea, .navi_util)를 기준으로 작성합니다.
    - 원본 FTP 백업 파일은 직접 수정하지 않습니다.
    - Google 번역 커스텀 UI는 아래 "Google 번역 커스텀 UI" 블록에서만 관리합니다.

    수정 가능:
    - 헤더 높이
    - 로고 크기
    - 우측 아이콘 간격
    - 검색 레이어 크기
    - 번역 아이콘/드롭다운 크기

    수정 주의:
    - .eNavFold, .searchBtn, .searchClose, .overlay는 header.js와 연결됩니다.
    - #google_translate_element, .goog-te-combo는 Google Translate와 연결됩니다.
*/

header {background:var(--mono-ff); position:relative; z-index: 98; box-sizing:border-box; transition:.5s;}
#header {border-bottom:1px solid var(--mono-4-dd);}
header{position:sticky; top: 0; left: 0;}
header .h_inner {position:relative; box-sizing: border-box;}

/* topArea */
.topArea{position:relative; height: 60px; display: flex; justify-content: space-between; align-items: center; padding:0 16px; box-sizing: border-box;}

/* moBtn */
.moBtn{display: flex; align-items: center; gap: 20px;}
.moBtn .btnNav{width: 25px; height: 25px;}
.moBtn .icon.icoNav, .moBtn .icon.icoNav:before{height: 2px;}

/* logo */
.h_logo{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.h_logo img{width: 100px; height: auto;}

/* navi_util: 우측 검색/번역 아이콘 영역 */
header .navi_util {display: flex; align-items: center; gap: 18px;}
/* 장바구니를 다시 사용할 때만 유지되는 예비 스타일입니다. 현재 HTML에서는 cart/count 마크업을 제거했습니다. */
header .navi_util .cart{position:relative;}
header .navi_util .cart .count{font-size: 12px; background:var(--point-color-primary); color: #fff; position: absolute; width: 18px; height: 18px; bottom: -2px; right: -9px; border-radius: 50%; display: flex; justify-content: center; align-items: center;}

/* 검색창 */
body.searchOpen .overlay {display:block;}
body.searchOpen .searchBox{opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: transform .35s ease, opacity .25s ease, visibility 0s;}
body.searchOpen {/*overflow:hidden;*/}
.overlay {position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: var(--width); max-width: var(--width-max); height: 100%; background: rgba(0, 0, 0, 0.4); display: none; z-index: 29;}
.searchClose {position: absolute; top: 10%; right: 5%; width: 25px; height: 25px; cursor: pointer;}
.searchClose::before,.searchClose::after {content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1px; background: #000; transform-origin: center;}
.searchClose::before {transform: translate(-50%, -50%) rotate(45deg);}
.searchClose::after {transform: translate(-50%, -50%) rotate(-45deg);}
.searchBox {padding: 30px; box-sizing: border-box; position: fixed; left: 50%; top: 0; width: var(--width); max-width: var(--width-max); height: 220px; background: var(--mono-ff); border-radius: 0 0 30px 30px; z-index: 30;
  opacity: 0; visibility: hidden; transform: translate(-50%, -120%); transition: transform .35s ease, opacity .25s ease, visibility 0s .35s; will-change: transform, opacity;}
.searchBox .searchheader{width: calc(100% - 100px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width:300px; margin: 20px 0 0;}
.searchBox .searchheader input[type=text] {border: none; border-bottom: 1px solid var(--mono-00); outline: none; width:100%; height: 30px; line-height: 30px; padding: 2px 26px 2px 15px;}
.searchBox fieldset{position:relative;}
.searchBox fieldset .searchBtn{position: absolute; top: 5px; right:0; width: 18px; height: auto;}

/* --- Google 번역 커스텀 UI --------------------------------------------------

    구조:
    - .headerTranslateOriginal: Google 기본 select 생성용 숨김 영역
    - .branchHeaderTranslate__source: Boostify 원본 데이터 영역
    - .branchHeaderTranslate__list: 실제 국기 출력 그리드
    - .branchHeaderTranslate__option: Google 번역 언어 선택 버튼

    수정 가능:
    - 국기 크기: .branchHeaderTranslate__flag
    - 그리드 간격: .branchHeaderTranslate__list gap

    수정 금지:
    - #google_translate_element 숨김 구조
    - .goog-te-combo 숨김 구조
    - display:none으로 .goog-te-combo를 제거하지 마세요.

---------------------------------------------------------------------------- */

/* Google 기본 번역 영역: 기능만 유지하고 화면에서는 숨김 */
.headerTranslateOriginal,
#google_translate_element {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

#google_translate_element select,
.goog-te-combo {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.goog-logo-link,
.goog-te-gadget span {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
    font-size: 0 !important;
}

/* Google 번역 상단 안내바 숨김: 번역 시 body가 아래로 밀리는 현상 방지 */
body {
    top: 0 !important;
}

.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

/* 커스텀 언어 선택 UI 루트 */
.branchHeaderTranslate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    box-sizing: border-box;
}
.branchHeaderTranslate[hidden],
.branchHeaderTranslate .branchHeaderTranslate__source {
    display: none !important;
}

/* 이전 토글 버튼 호환 스타일 — 현재 출력은 3×2 그리드로 항상 표시 */
.branchHeaderTranslate .branchHeaderTranslate__button {
    display: none;
}

/* 3×2 그리드로 항상 표시 */
.branchHeaderTranslate .branchHeaderTranslate__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

.branchHeaderTranslate .branchHeaderTranslate__item {
    margin: 0;
    padding: 0;
}

.branchHeaderTranslate .branchHeaderTranslate__option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    border: 0;
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
    transition: opacity 0.2s;
}

/* 국기 이미지 */
.branchHeaderTranslate .branchHeaderTranslate__flag {
    display: inline-flex;
    align-items: center;
    width: 30px;
    height: 20px;
    overflow: hidden;
    border-radius: 3px;
    box-sizing: border-box;
    background: #f0f0f0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.branchHeaderTranslate .branchHeaderTranslate__flag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 텍스트 레이블 숨김 */
.branchHeaderTranslate .branchHeaderTranslate__name {
    display: none;
}

@media (hover: hover) {
    .branchHeaderTranslate .branchHeaderTranslate__option:hover {
        opacity: 0.7;
    }
}

@media (max-width: 767px) {
    .branchHeaderTranslate .branchHeaderTranslate__list {
        gap: 3px;
    }

    .branchHeaderTranslate .branchHeaderTranslate__flag {
        width: 24px;
        height: 16px;
    }
}

/* --- Google 번역 커스텀 UI --- */

/* ---------------------------------------------------------------------------
   헤더 검색 결과 목록 (.autoDrop)
   --------------------------------------------------------------------------- */
.searchheader .autoDrop {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1010;
    max-height: 320px;
    margin: 6px 0 0;
    padding: 6px 0;
    overflow-y: auto;
    border-radius: var(--radius-8);
    background: var(--mono-ff);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
    text-align: left;
}

.searchheader .autoDrop__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    color: var(--font-color-base);
    text-decoration: none;
}

.searchheader .autoDrop__link:hover,
.searchheader .autoDrop__link:focus-visible {
    background: var(--mono-5-f6);
}

.searchheader .autoDrop__title { font-size: 14px; font-weight: 500; }
.searchheader .autoDrop__category { flex: 0 0 auto; font-size: 12px; color: var(--mono-2-95); }