/* GNB 위 유틸 메뉴 — 회색 통띠를 걷고 헤더 줄 위에 얹는다.

   왜 :
   - 히어로 위에 [프로모션 배너 100px] + [회색 유틸 42px] + [헤더] 로 띠가 세 겹 쌓였다.
   - #ecf0f5 / 구분선 #d3dae4 는 리뉴얼 토큰(#f5f6f8 / #e8ecf3) 밖 값이다.
   - '결제하기' 가 '로그아웃' 과 같은 무게라 가장 상업적인 행동이 묻혔다.

   범위 : 1025px 이상에서만. 1024 이하는 header-responsive.css 가 이 바를
          모바일 패널로 옮기므로 건드리지 않는다.
   되돌리기 : _Layout.cshtml 의 링크 한 줄과 이 파일만 걷으면 된다. */

@media (min-width: 1025px) {

    .header .header_bar {
        min-width: 0;
        height: auto;
        line-height: 1;
        padding: 14px 0 0;
        background: transparent;
        /* bundle.css 의 스크롤 연동 배경 애니메이션(mc-header-bar-lift)도 함께 끈다 */
        animation: none;
    }

    /* 히어로가 헤더 뒤로 깔리는 화면(.zero)에서도 띠를 세우지 않는다 */
    .zero .header .header_bar {
        background: transparent;
    }

    .header .header_bar .inwrap {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .header .header_bar .link_bar {
        float: none;
        display: flex;
        align-items: center;
    }

        .header .header_bar .link_bar > li,
        .header .header_bar .link_bar li {
            float: none;
            display: inline-flex;
            align-items: center;
            line-height: 1;
        }

        /* 구분선 — 배경 이미지도 남의 ::before 도 걷고, li 자신의 왼쪽 선으로 긋는다.
           (가상요소로 그으면 다른 레이어의 ::before 와 부딪힌다) */
        .header .header_bar .link_bar li.line {
            background: none;
        }

        .header .header_bar .link_bar li + li::before {
            content: none !important;
        }

        .header .header_bar .link_bar li + li {
            margin-left: 14px;
            padding-left: 14px;
            border-left: 1px solid var(--mc-border, #e8ecf3);
        }

        .header .header_bar .link_bar li a {
            padding: 0;
            font-size: 13px;
            font-weight: 500;
            color: #8a92a3;
            vertical-align: baseline;
            transition: color .18s;
        }

            .header .header_bar .link_bar li a:hover {
                color: #191f2b;
            }

        /* 결제하기 — 넷 중 가장 상업적인 행동이라 한 층 올린다 */
        .header .header_bar .link_bar li a[href*="PaymentView"] {
            color: #191f2b;
            font-weight: 600;
        }

            .header .header_bar .link_bar li a[href*="PaymentView"]:hover {
                color: #2563ff;
            }

        .header .header_bar .link_bar li .txt_tel {
            display: inline-flex;
            align-items: center;
            font-size: 13px;
            font-weight: 600;
            color: #191f2b;
            line-height: 1;
        }

    .zero .header .header_bar .link_bar li .txt_tel {
        color: #fff;
    }

    .header .header_bar .link_bar li .txt_tel:before {
        top: 50%;
        transform: translateY(-50%);
    }
}

/* 헤더 CTA — 페이지의 주 버튼(검색창 '키워드 분석', 절 하단 알약)이 검정이다.
   파랑→보라 그라디언트만 혼자 달라서 같은 검정으로 맞춘다. */
.header_wrap nav > button {
    background: #111;
}

    .header_wrap nav > button:hover {
        background: #2563ff;
    }