header.siteHeader {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    --siteHeader-fill: rgba(51, 51, 51, 0.3);
    --siteHeader-edge: rgba(255, 255, 255, 0.12);
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}

header.siteHeader::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--siteHeader-fill);
    border-bottom: 1px solid var(--siteHeader-edge);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background-color 0.22s ease,
        backdrop-filter 0.22s ease,
        -webkit-backdrop-filter 0.22s ease;
}


body.sub_03 header.siteHeader,
body.sub_04 header.siteHeader {
    /* 라이트 본문 톤: 투명 헤더 바 + 패널은 흰 배경 (#fff / 테두리 sub 페이지 계열과 맞춤) */
    --siteHeader-fill: #ffffff;
    --siteHeader-edge: rgba(11, 15, 26, 0.1);
}

body.sub_03 header.siteHeader::before,
body.sub_04 header.siteHeader::before {
    background: transparent;
}

body.sub_03 header.siteHeader .gnbBox > nav > ul.gnb > li > a,
body.sub_04 header.siteHeader .gnbBox > nav > ul.gnb > li > a {
    color: #000000;
}

body.sub_03 header.siteHeader .mobMenu .mobMenu__dot,
body.sub_04 header.siteHeader .mobMenu .mobMenu__dot {
    background-color: #000000;
}

body.sub_03 header.siteHeader .gnbBox .subMenu a,
body.sub_04 header.siteHeader .gnbBox .subMenu a {
    color: #000000;
}


/* 스크롤 시 불투명도↑ + 블러 글래스 (일반 헤더) */
header.siteHeader.scroll::before {
    background: rgba(51, 51, 51, 0.52);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
}

/* sub_03/04: 바만 라이트 글래스 (드롭다운 패널은 위쪽 --siteHeader-fill #fff 유지) */
body.sub_03 header.siteHeader.scroll::before,
body.sub_04 header.siteHeader.scroll::before {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
}

/* 로그인 메시지 — 로고 우측(siteHeader__brand) 고정 */
header.siteHeader .siteHeader__brand {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 16px 20px;
    min-width: 0;
    max-width: 100%;
    position: relative;
    z-index: 2;
}

#hd_login_msg {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(520px, calc(100vw - 360px));
    background: transparent;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 36px;
    text-align: left;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    pointer-events: auto;
}

#hd_login_msg a {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: -1;
    padding: 0 12px;
    margin-right: 0;
    font-family: 'Poppins', sans-serif;
    border-radius: 999px;
    background: #f3f3f3;
    color: #111111;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#hd_login_msg a:link,
#hd_login_msg a:visited,
#hd_login_msg a:active,
#hd_login_msg a:focus {
    color: #111111;
}

#hd_login_msg a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

#hd_login_msg a:hover {
    background: #e4e4e4;
    color: #111111;
}

body.sub_03 #hd_login_msg,
body.sub_04 #hd_login_msg{
    color: #000000;
}

header.siteHeader .siteHeader__inner {
    position: relative;
    z-index: 1;
    width: min(1840px, calc(100% - 80px));
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    height: 100px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 42px;
}

header.siteHeader h1 {
    margin: 0;
    line-height: 0;
    flex: 0 0 auto;
}

header.siteHeader h1 img {
    width: auto;
    height: 42px;
    object-fit: contain;
    display: block;
}

header.siteHeader .gnbBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

@media (min-width: 1441px) {
    header.siteHeader .gnbBox > nav {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        flex: none;
        width: max-content;
        max-width: calc(100% - 320px);
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    header.siteHeader .gnbBox > nav > ul.gnb {
        pointer-events: auto;
    }
}

header.siteHeader nav > ul.gnb {
    display: flex;
    justify-content: flex-start;
    gap: 86px;
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

header.siteHeader nav > ul.gnb > li {
    position: relative;
}

header.siteHeader nav > ul.gnb > li > a {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    word-break: keep-all;
}

header.siteHeader nav > ul.gnb > li > a span {
    text-decoration: none;
    text-decoration-color: currentColor;
    text-underline-offset: 0.4em;
    text-decoration-thickness: 2px;
}

header.siteHeader nav > ul.gnb > li.active > a span,
header.siteHeader nav > ul.gnb > li > a:hover span,
header.siteHeader nav > ul.gnb > li > a:focus-visible span {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.4em;
}

/* 2depth 드롭다운 */
header.siteHeader .subMenu {
    --subMenuPadX: 14px;
    --subMenuItemPadX: 12px;
    --subMenuTextAlignOffset: calc(var(--subMenuPadX) + var(--subMenuItemPadX));

    position: absolute;
    top: 100%;
    left: calc(0px - var(--subMenuTextAlignOffset));
    transform: translateY(18px);
    min-width: 180px;
    padding: var(--subMenuPadX) var(--subMenuPadX);
    border-radius: 16px;
    background: var(--siteHeader-fill);
    border: 1px solid var(--siteHeader-edge);
    z-index: 50;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

header.siteHeader .subMenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
}

header.siteHeader .subMenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

header.siteHeader .subMenu li.hasChildren {
    position: relative;
}

header.siteHeader .subMenu li.hasChildren > a {
    font-weight: 700;
    position: relative;
    padding-right: calc(var(--subMenuItemPadX) + 18px);
}

header.siteHeader .subMenu li.hasChildren > a::after {
    content: "";
    position: absolute;
    right: var(--subMenuItemPadX);
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.55;
}

header.siteHeader .subMenu ul.subMenu__child {
    position: absolute;
    top: calc(0px - var(--subMenuPadX) - 2px);
    left: calc(100% + 18px);
    min-width: 180px;
    padding: var(--subMenuPadX) var(--subMenuPadX);
    border-radius: 16px;
    background: var(--siteHeader-fill);
    border: 1px solid var(--siteHeader-edge);
    box-shadow: none;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
    transform: translateY(0);
}

header.siteHeader nav > ul.gnb > li:has(ul.subMenu__child) > .subMenu {
    box-shadow: none;
}

/* sub_03/04: 패널 음영은 위쪽 none 규칙 이후에 다시 줘서 다른 페이지와 구분 유지 */
body.sub_03 header.siteHeader .subMenu,
body.sub_04 header.siteHeader .subMenu,
body.sub_03 header.siteHeader .subMenu ul.subMenu__child,
body.sub_04 header.siteHeader .subMenu ul.subMenu__child {
    box-shadow: 0 10px 40px rgba(11, 15, 26, 0.08);
}

body.sub_03 header.siteHeader nav > ul.gnb > li:has(ul.subMenu__child) > .subMenu,
body.sub_04 header.siteHeader nav > ul.gnb > li:has(ul.subMenu__child) > .subMenu {
    box-shadow: 0 10px 40px rgba(11, 15, 26, 0.08);
}

header.siteHeader .subMenu ul.subMenu__child::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 0;
    width: 18px;
    height: 100%;
}

header.siteHeader .subMenu li.hasChildren:hover > ul.subMenu__child,
header.siteHeader .subMenu li.hasChildren:focus-within > ul.subMenu__child {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
}

header.siteHeader .subMenu a {
    display: block;
    padding: 10px var(--subMenuItemPadX);
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

header.siteHeader .subMenu a span {
    text-decoration: none;
    text-decoration-color: currentColor;
    text-underline-offset: 0.36em;
    text-decoration-thickness: 2px;
}

header.siteHeader .subMenu li.active > a span,
header.siteHeader .subMenu a:hover span,
header.siteHeader .subMenu a:focus-visible span {
    background: transparent;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.36em;
}

header.siteHeader .subMenu li.active > a,
header.siteHeader .subMenu a:hover,
header.siteHeader .subMenu a:focus-visible {
    background: transparent;
    color: #ffffff;
}

header.siteHeader nav > ul.gnb > li:hover > .subMenu,
header.siteHeader nav > ul.gnb > li:focus-within > .subMenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(16px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
}

header.siteHeader .rightMenu {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 2;
}

header.siteHeader .mobMenu {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

header.siteHeader .mobMenu button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

header.siteHeader .mobMenu .mobMenu__icon {
    display: grid;
    grid-template-columns: repeat(2, 8px);
    grid-template-rows: repeat(2, 8px);
    gap: 10px;
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    flex-shrink: 0;
}

header.siteHeader .mobMenu .mobMenu__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ffffff;
    box-sizing: border-box;
}

body.is-headerDrawerOpen {
    overflow: hidden;
    padding-right: var(--headerDrawer-scrollbar, 0px);
}

body.is-headerDrawerOpen header.siteHeader {
    padding-right: var(--headerDrawer-scrollbar, 0px);
}

header.siteHeader .siteHeader__drawerBackdrop,
header.siteHeader .siteHeader__drawer {
    display: block;
}

header.siteHeader .siteHeader__drawerBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 18, 0.42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
    z-index: 1200;
}

header.siteHeader .siteHeader__drawer {
    --drawer-bg: #0f1115;
    --drawer-edge: rgba(255, 255, 255, 0.08);
    --drawer-muted: rgba(255, 255, 255, 0.58);
    --drawer-accent: #226bda;
    position: fixed;
    top: 0;
    right: 0;
    width: min(392px, 88vw);
    height: 100vh;
    height: 100dvh;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 42%),
        var(--drawer-bg);
    color: #ffffff;
    border-left: 1px solid var(--drawer-edge);
    transform: translate3d(100%, 0, 0);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1201;
    box-shadow: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

@media (min-width: 1025px) {
    /* PC: blur·배경 fade·그림자 동시 변화가 버벅임 유발 → 패널 slide만 */
    header.siteHeader .siteHeader__drawerBackdrop {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(8, 10, 18, 0.52);
        transition: none;
    }

    header.siteHeader.is-drawerOpen .siteHeader__drawerBackdrop {
        transition: none;
    }

    header.siteHeader .siteHeader__drawer {
        background: var(--drawer-bg);
        transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
        contain: layout style paint;
        box-shadow: -16px 0 40px rgba(0, 0, 0, 0.22);
    }

    header.siteHeader.is-drawerOpen .siteHeader__drawer {
        will-change: transform;
        box-shadow: -16px 0 40px rgba(0, 0, 0, 0.22);
    }

    header.siteHeader .siteHeader__drawerHead {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--drawer-bg);
    }
}

header.siteHeader .siteHeader__drawerHead {
    min-height: 72px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--drawer-edge);
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(15, 17, 21, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

header.siteHeader .siteHeader__drawerHead strong {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.72);
}

header.siteHeader .siteHeader__drawerClose {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease;
}

header.siteHeader .siteHeader__drawerClose:hover,
header.siteHeader .siteHeader__drawerClose:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

header.siteHeader .siteHeader__drawerClose span {
    display: none;
}

header.siteHeader .siteHeader__drawerClose::before,
header.siteHeader .siteHeader__drawerClose::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1.5px;
    margin-left: -8px;
    margin-top: -0.75px;
    background: rgba(255, 255, 255, 0.92);
    transform-origin: 50% 50%;
    transition: background-color 0.2s ease;
}

header.siteHeader .siteHeader__drawerClose::before {
    transform: rotate(45deg);
}

header.siteHeader .siteHeader__drawerClose::after {
    transform: rotate(-45deg);
}

header.siteHeader .siteHeader__drawerBody {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 8px 28px calc(88px + env(safe-area-inset-bottom));
}

header.siteHeader .siteHeader__drawerNav {
    margin-top: 0;
}

header.siteHeader .siteHeader__drawerNav nav {
    display: block;
}

header.siteHeader .siteHeader__drawerNav ul.gnb {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

header.siteHeader .siteHeader__drawerNav ul.gnb > li {
    border-bottom: 1px solid var(--drawer-edge);
    padding: 18px 0;
}

header.siteHeader .siteHeader__drawerNav ul.gnb > li:last-child {
    border-bottom: 0;
}

header.siteHeader .siteHeader__drawerNav ul.gnb > li > a {
    display: block;
    padding: 2px 0;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.2s ease;
}

header.siteHeader .siteHeader__drawerNav ul.gnb > li > a span {
    text-decoration: none;
    text-decoration-color: currentColor;
    text-underline-offset: 0.34em;
    text-decoration-thickness: 1px;
}

header.siteHeader .siteHeader__drawerNav ul.gnb > li.active > a,
header.siteHeader .siteHeader__drawerNav ul.gnb > li > a:hover,
header.siteHeader .siteHeader__drawerNav ul.gnb > li > a:focus-visible {
    color: #ffffff !important;
    background: transparent !important;
}

header.siteHeader .siteHeader__drawerNav ul.gnb > li.active > a span,
header.siteHeader .siteHeader__drawerNav ul.gnb > li > a:hover span,
header.siteHeader .siteHeader__drawerNav ul.gnb > li > a:focus-visible span {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.34em;
}

header.siteHeader .siteHeader__drawerNav .subMenu {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    min-width: 0;
    margin: 14px 0 0;
    padding: 0 0 0 14px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

header.siteHeader .siteHeader__drawerNav .subMenu::before {
    display: none;
}

header.siteHeader .siteHeader__drawerNav .subMenu ul {
    gap: 0;
}

header.siteHeader .siteHeader__drawerNav .subMenu a {
    display: block;
    padding: 9px 0;
    border-radius: 0;
    background: transparent;
    color: var(--drawer-muted);
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

header.siteHeader .siteHeader__drawerNav .subMenu a span {
    text-decoration: none;
    text-decoration-color: currentColor;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 1px;
}

header.siteHeader .siteHeader__drawerNav .subMenu li.active > a {
    color: #ffffff;
    background: transparent;
    padding-left: 4px;
}

header.siteHeader .siteHeader__drawerNav .subMenu li.active > a span {
    text-decoration-line: none;
}

header.siteHeader .siteHeader__drawerNav .subMenu a:hover,
header.siteHeader .siteHeader__drawerNav .subMenu a:focus-visible {
    background: transparent;
    color: #ffffff;
    padding-left: 4px;
}

header.siteHeader .siteHeader__drawerNav .subMenu a:hover span,
header.siteHeader .siteHeader__drawerNav .subMenu a:focus-visible span {
    text-decoration-line: none;
}

header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > a {
    padding-right: 0;
}

header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > a::after {
    display: none;
}

header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren {
    position: relative;
    padding-right: 36px;
}

header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > .siteHeader__drawerToggle {
    position: absolute;
    right: 0;
    top: 6px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > .siteHeader__drawerToggle:hover,
header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > .siteHeader__drawerToggle:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    outline: none;
}

header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > .siteHeader__drawerToggle::before,
header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > .siteHeader__drawerToggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 1.5px;
    margin-left: -5px;
    margin-top: -0.75px;
    background: rgba(255, 255, 255, 0.88);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > .siteHeader__drawerToggle::after {
    transform: rotate(90deg);
}

header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren.is-open > .siteHeader__drawerToggle::after {
    opacity: 0;
    transform: rotate(0deg);
}

header.siteHeader .siteHeader__drawerNav .subMenu ul.subMenu__child {
    position: static;
    top: auto;
    left: auto;
    min-width: 0;
    margin: 4px 0 0;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

header.siteHeader .siteHeader__drawerNav .subMenu ul.subMenu__child::before {
    display: none;
}

header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > ul.subMenu__child {
    display: none;
}

header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren.is-open > ul.subMenu__child {
    display: block;
}

header.siteHeader .siteHeader__drawerNav nav > ul.gnb > li:hover > .subMenu,
header.siteHeader .siteHeader__drawerNav nav > ul.gnb > li:focus-within > .subMenu {
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

header.siteHeader .siteHeader__drawerNav .subMenu,
header.siteHeader .siteHeader__drawerNav .subMenu ul.subMenu__child {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

header.siteHeader .siteHeader__drawerNav .subMenu li.active > a,
header.siteHeader .siteHeader__drawerNav .subMenu a:hover,
header.siteHeader .siteHeader__drawerNav .subMenu a:focus-visible {
    box-shadow: none !important;
}

header.siteHeader.is-drawerOpen .siteHeader__drawerBackdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms ease;
}

header.siteHeader.is-drawerOpen .siteHeader__drawer {
    transform: translate3d(0, 0, 0);
    box-shadow:
        -1px 0 0 rgba(255, 255, 255, 0.06),
        -20px 0 48px rgba(0, 0, 0, 0.28),
        -40px 0 80px rgba(0, 0, 0, 0.18);
}

header.siteHeader.scroll .siteHeader__drawer {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 42%),
        var(--drawer-bg);
    color: #ffffff;
}

header.siteHeader.scroll .siteHeader__drawer .siteHeader__drawerHead {
    background: rgba(15, 17, 21, 0.92);
}

header.siteHeader.scroll .siteHeader__drawer nav > ul.gnb > li > a {
    color: #ffffff !important;
}

header.siteHeader.scroll .siteHeader__drawer .subMenu a {
    color: var(--drawer-muted) !important;
}

header.siteHeader.scroll .siteHeader__drawer .subMenu li.active > a,
header.siteHeader.scroll .siteHeader__drawer .subMenu a:hover,
header.siteHeader.scroll .siteHeader__drawer .subMenu a:focus-visible {
    color: #ffffff !important;
}

header.siteHeader.scroll .siteHeader__drawer .subMenu li.hasChildren > .siteHeader__drawerToggle::before,
header.siteHeader.scroll .siteHeader__drawer .subMenu li.hasChildren > .siteHeader__drawerToggle::after {
    background: rgba(255, 255, 255, 0.88);
}

header.siteHeader.scroll .siteHeader__drawer .siteHeader__drawerClose::before,
header.siteHeader.scroll .siteHeader__drawer .siteHeader__drawerClose::after {
    background: rgba(255, 255, 255, 0.92);
}

/* 반응형 */
@media (max-width: 1440px) {
    #hd_login_msg {
        max-width: min(420px, calc(100vw - 220px));
    }

    header.siteHeader .siteHeader__inner {
        width: 100%;
        padding: 0 5%;
        gap: 20px;
    }

    header.siteHeader .gnbBox > nav {
        display: none;
    }

    header.siteHeader .gnbBox {
        justify-content: flex-end;
    }
}

@media (max-width: 1024px) {
    header.siteHeader .siteHeader__inner {
        height: 80px;
    }

    header.siteHeader .siteHeader__brand {
        gap: 12px 14px;
    }

    #hd_login_msg {
        max-width: min(320px, calc(100vw - 200px));
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    header.siteHeader h1 img {
        width: auto;
        height: 36px;
    }

    header.siteHeader .siteHeader__brand {
        gap: 10px 12px;
    }

    #hd_login_msg {
        max-width: calc(100vw - 160px);
    }
}