@charset "utf-8";
/* SiteKit 헤더 스타일 (extend/sitekit_header.extend.php 가 사용자 화면에서만 불러옴) */

/* =========================================================================
   헤더 스타일 변형 (관리자 > 사이트관리 > 헤더 스타일)
   - sk-hd-logo-{left|center} · sk-hd-menu-{center|right} · sk-hd-sub-{mega|dropdown|none} · sk-hd-bg-{auto|solid}
   ========================================================================= */
/* 오른쪽 버튼 (CTA) */
.sk-header .sk-cta {
    position: relative;
    z-index: 3;
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 42px;
    margin-left: auto;
    padding: 0 22px;
    border: 1.5px solid var(--sk-point);
    border-radius: 999px;
    background: var(--sk-point);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s, filter .2s;
}

.sk-header .sk-cta:hover {
    filter: brightness(.92);
}

.sk-header .sk-cta.sk-cta-line {
    border-color: currentColor;
    background: transparent;
    color: inherit;
}

.sk-header .sk-cta.sk-cta-line:hover {
    filter: none;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.sk-header .sk-cta:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.sk-header .sk-cta+.sk-util {
    margin-left: 12px;
}

/* 대메뉴 오른쪽 (로고 왼쪽일 때) */
.sk-header.sk-hd-logo-left.sk-hd-menu-right .pc-menu {
    position: relative;
    left: auto;
    transform: none;
    margin-left: auto;
}

.sk-header.sk-hd-logo-left.sk-hd-menu-right .sk-cta {
    margin-left: 24px;
}

.sk-header.sk-hd-logo-left.sk-hd-menu-right .pc-menu~.sk-util {
    margin-left: 16px;
}

/* 로고 가운데 (대메뉴는 왼쪽) */
.sk-header.sk-hd-logo-center {
    --sk-menu-w: auto;
}

.sk-header.sk-hd-logo-center .sk-logo {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.sk-header.sk-hd-logo-center .pc-menu {
    position: relative;
    left: auto;
    transform: none;
    margin-left: -18px;
}

.sk-header.sk-hd-logo-center .pc-menu>li {
    padding: 0 18px;
}

/* 각각 드롭다운 : 대메뉴 hover 밑줄 없음 */
.sk-header.sk-hd-sub-dropdown .pc-menu>li>a::after {
    display: none;
}

/* 하위메뉴 : 펼치지 않음 */
.sk-header.sk-hd-sub-none::after,
.sk-header.sk-hd-sub-dropdown::after {
    display: none;
}

.sk-header.sk-hd-sub-none .pc-menu .sk-sub {
    display: none;
}

/* 하위메뉴 : 각 대메뉴 아래 드롭다운 */
.sk-header.sk-hd-sub-dropdown .pc-menu .sk-sub {
    top: calc(100% - 8px);
    left: 50%;
    right: auto;
    min-width: 190px;
    padding: 10px;
    border: 1px solid var(--sk-line);
    border-radius: 14px;
    background: #fff;
    text-align: left;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
    transform: translate(-50%, -6px);
}

.sk-header.sk-hd-sub-dropdown .pc-menu>li:hover>.sk-sub,
.sk-header.sk-hd-sub-dropdown .pc-menu>li:focus-within>.sk-sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .2s ease, transform .25s var(--sk-ease), visibility 0s;
}

/* 대메뉴 높이가 헤더보다 낮은 레이아웃 대비 : 드롭다운은 대메뉴 글자 아래로 띄우고, 사이 빈 곳은 마우스가 지나가도 닫히지 않게 */
.sk-header.sk-hd-sub-dropdown .pc-menu .sk-sub {
    top: calc(100% + 14px);
}

.sk-header.sk-hd-sub-dropdown .pc-menu .sk-sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -22px;
    height: 22px;
}

/* 로고 가운데(대메뉴 왼쪽) : 드롭다운을 대메뉴 왼쪽에 맞춤 (화면 밖으로 나가지 않게) */
.sk-header.sk-hd-logo-center.sk-hd-sub-dropdown .pc-menu .sk-sub {
    left: 4px;
    transform: translateY(-6px);
}

.sk-header.sk-hd-logo-center.sk-hd-sub-dropdown .pc-menu>li:hover>.sk-sub,
.sk-header.sk-hd-logo-center.sk-hd-sub-dropdown .pc-menu>li:focus-within>.sk-sub {
    transform: none;
}

.sk-header.sk-hd-sub-dropdown .pc-menu .sk-sub a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    color: #333;
    font-size: 15px;
    white-space: nowrap;
}

.sk-header.sk-hd-sub-dropdown .pc-menu .sk-sub a:hover,
.sk-header.sk-hd-sub-dropdown .pc-menu .sk-sub a:focus-visible {
    background: #f4f6f8;
}

/* 헤더 배경 : 항상 흰색 (비주얼 위에서도 투명 안 함) */
body:has(.sk-hero) .sk-header.sk-hd-bg-solid {
    position: sticky;
}

body:has(.sk-hero) .sk-header.sk-hd-bg-solid:not(.is-scrolled):not(.is-mega):not(.is-open) {
    background: #fff;
    box-shadow: 0 1px 0 var(--sk-line);
    color: var(--sk-ink);
}

body:has(.sk-hero) .sk-header.sk-hd-bg-solid:not(.is-scrolled):not(.is-mega):not(.is-open) .logo-w {
    display: none;
}

body:has(.sk-hero) .sk-header.sk-hd-bg-solid:not(.is-scrolled):not(.is-mega):not(.is-open) .logo-b {
    display: flex;
}

body:has(.sk-hero) .sk-header.sk-hd-bg-solid:not(.is-scrolled):not(.is-mega):not(.is-open)::before {
    display: none;
}

body:has(.sk-hero) .sk-header.sk-hd-bg-solid:not(.is-scrolled):not(.is-mega) .pc-menu>li.on>a {
    color: var(--sk-point);
}

@media (max-width: 1100px) {
    .sk-header.sk-hd-logo-left.sk-hd-menu-right .sk-cta {
        margin-left: auto;
    }

    .sk-header.sk-hd-logo-left.sk-hd-menu-right:not(.sk-hd-has-cta) .sk-util {
        margin-left: auto;
    }
}

@media (max-width: 768px) {

    /* 모바일 : 오른쪽 버튼은 작게 줄여 같은 자리 유지 */
    .sk-header .sk-cta {
        height: 32px;
        padding: 0 12px;
        font-size: 12.5px;
        border-width: 1.2px;
    }

    .sk-header .sk-cta,
    .sk-header.sk-hd-logo-left.sk-hd-menu-right .sk-cta {
        margin-left: auto;
    }

    .sk-header .sk-cta+.sk-util,
    .sk-header.sk-hd-has-cta.sk-hd-logo-left.sk-hd-menu-right .pc-menu~.sk-util {
        margin-left: 6px;
    }

    .sk-header.sk-hd-has-cta .sk-util {
        gap: 0;
    }

    /* 로고 가운데 + 버튼 : 좁은 화면에서 겹치지 않게 로고를 왼쪽으로 */
    .sk-header.sk-hd-logo-center.sk-hd-has-cta .sk-logo {
        position: relative;
        left: auto;
        transform: none;
    }
}

@media (max-width: 400px) {
    .sk-header .sk-cta {
        padding: 0 10px;
        font-size: 12px;
    }

    .sk-header.sk-hd-has-cta .sk-util-btn {
        width: 34px;
        height: 34px;
    }

    .sk-header.sk-hd-has-cta .sk-util-btn svg {
        width: 19px;
        height: 19px;
    }
}