/* =================================== header =================================== */
/* .header_over : 1섹션(히어로) 위에 겹쳐 올라가는 페이지에서 header.html을 감싸는 래퍼 */
.header_over {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
}

#header_wrap {
    width: 100%;
    height: 70px;
    background: #ffffff;
    border-bottom: 1px solid #e1e1e1;
    transition: background-color .3s ease, border-color .3s ease;
}

.header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* =================================== logo =================================== */
.header_logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header_logo img {
    width: auto;
    height: clamp(34px, 6.4vw, 51px);
    display: none;
}

.header_logo .logo_black {
    display: block;
}

/* =================================== gnb =================================== */
.header_gnb ul {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3.2vw, 52px);
}

.header_gnb a {
    display: block;
    font-size: clamp(15px, 1.1vw, 18px);
    font-weight: 500;
    line-height: 26px;
    color: #222222;
    white-space: nowrap;
    transition: color .3s ease;
}

.header_gnb a:hover {
    color: var(--main-orange);
}

/* =================================== right =================================== */
.header_right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.header_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 8px;
    background: var(--main-orange);
    font-size: clamp(14px, 1.05vw, 17px);
    font-weight: 700;
    line-height: 24px;
    color: #ffffff;
    white-space: nowrap;
    transition: filter .2s ease;
}

.header_btn:hover {
    filter: brightness(1.08);
}

.header_menu_btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    font-size: 26px;
    color: #222222;
    transition: color .3s ease;
}

/* =================================== 히어로 위 투명 상태 =================================== */
.header_over #header_wrap {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.header_over #header_wrap .logo_black {
    display: none;
}

.header_over #header_wrap .logo_white {
    display: block;
}

.header_over #header_wrap .header_gnb a,
.header_over #header_wrap .header_menu_btn {
    color: #ffffff;
}

.header_over #header_wrap .header_gnb a:hover {
    color: var(--main-orange);
}

/* =================================== 2섹션부터 흰 배경 상태 =================================== */
.header_over #header_wrap.is_scrolled {
    background: #ffffff;
    border-bottom-color: #e1e1e1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.header_over #header_wrap.is_scrolled .logo_white {
    display: none;
}

.header_over #header_wrap.is_scrolled .logo_black {
    display: block;
}

.header_over #header_wrap.is_scrolled .header_gnb a,
.header_over #header_wrap.is_scrolled .header_menu_btn {
    color: #222222;
}

.header_over #header_wrap.is_scrolled .header_gnb a:hover {
    color: var(--main-orange);
}

/* =================================== mobile menu =================================== */
.header_mobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
}

.header_mobile.is_open {
    display: block;
}

.header_mobile_dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
}

.header_mobile_panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(300px, 82%);
    height: 100%;
    padding: 20px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.header_mobile_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid #eeeae4;
}

.header_mobile_head img {
    width: auto;
    height: 42px;
}

.header_mobile_close {
    background: transparent;
    font-size: 26px;
    color: #222222;
    line-height: 1;
}

.header_mobile_list {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.header_mobile_list a {
    display: block;
    padding: 15px 4px;
    font-size: 17px;
    font-weight: 600;
    color: #222222;
    border-bottom: 1px solid #f4f0ea;
}

.header_mobile_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    margin-top: 14px;
    border-radius: 8px;
    background: var(--main-orange);
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

.header_mobile_tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    border-radius: 8px;
    background: var(--main-brown);
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

/* =================================== responsive =================================== */
@media (max-width: 1023px) {
    #header_wrap {
        height: 58px;
    }

    .header_gnb {
        display: none;
    }

    .header_menu_btn {
        display: inline-flex;
    }

    .header_btn {
        padding: 8px 14px;
    }
}

@media (max-width: 480px) {
    .header_btn {
        display: none;
    }
}