/* ========================================
   헤더 및 전체 메뉴 스타일
======================================== */

.header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;

    width: 100%;
    height: var(--header-height);

    padding:
            var(--header-top-space)
            var(--side-padding)
            0;

    display: grid;

    grid-template-columns:
    minmax(max-content, 1fr)
    auto
    minmax(max-content, 1fr);

    align-items: start;

    gap:
            clamp(24px, 2.7vw, 48px);

    color: var(--black);
    background-color: transparent;

    transition:
            background-color
            0.3s
            ease;
}

.header.is-nav-open {
    background-color: #ffffff;
}

.header__logo {
    justify-self: start;

    height:
            calc(
                    var(--header-height) -
                    var(--header-top-space)
            );

    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;
}

.header__logo-stack {
    position: relative;

    display: grid;
    align-items: center;
    justify-items: start;
}

.header__logo-image {
    grid-column: 1;
    grid-row: 1;

    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: none;

    flex: 0 0 auto;

    transition:
            opacity
            0.3s
            ease;
}


.header__logo-picture {
    grid-column: 1;
    grid-row: 1;

    display: block;

    transition:
            opacity
            0.3s
            ease;
}

.header__logo-source {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;
}

.header__logo-image--default {
    position: relative;
    z-index: 1;

    opacity: 1;
}

.header__logo-image--gold {
    position: relative;
    z-index: 2;

    opacity: 0;

    pointer-events: none;
}

.header.is-nav-open
.header__logo-image--default,
.header.is-section-light
.header__logo-image--default {
    opacity: 0;
}

.header.is-nav-open
.header__logo-image--gold,
.header.is-section-light
.header__logo-image--gold {
    opacity: 1;
}

.header__nav {
    justify-self: center;

    width: max-content;

    height:
            calc(
                    var(--header-height) -
                    var(--header-top-space)
            );

    transform:
            translateX(
                    var(--nav-shift-x)
            );
}

.header__nav-list {
    height: 100%;

    display: grid;

    grid-template-columns:
    repeat(
      6,
      var(--nav-column-width)
    );

    column-gap:
            var(--nav-column-gap);

    align-items: stretch;
    justify-content: center;

    white-space: nowrap;
}

.header__nav-item {
    position: relative;

    min-width: 0;
    height: 100%;
}

.header__nav-link {
    position: relative;

    width: 100%;
    height: 100%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--black);

    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
}

.header__nav-item:hover >
.header__nav-link,
.header__nav-item.is-active >
.header__nav-link {
    color: var(--black);
    font-weight: 500;
}

.header__nav-link::after {
    content: "";

    position: absolute;
    z-index: 3;

    left: 50%;
    bottom: 0;

    width: 56%;
    height: 4px;

    background-color: var(--gold);

    transform:
            translateX(-50%)
            scaleX(0);

    transform-origin: left center;

    transition:
            transform
            0.9s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            );
}

.header__nav-item:hover >
.header__nav-link::after,
.header__nav-item.is-active >
.header__nav-link::after {
    transform:
            translateX(-50%)
            scaleX(1);
}

.header__mega-menu {
    position: fixed;
    z-index: 90;

    top: var(--header-height);
    left: 0;

    width: 100vw;

    visibility: hidden;
    opacity: 0;

    background-color: #ffffff;

    transform:
            translate3d(0, -10px, 0);

    pointer-events: none;

    transition:
            visibility
            0s
            linear
            0.4s,

            opacity
            0.3s
            ease,

            transform
            0.45s
            var(--motion-ease);
}

.header.is-nav-open
.header__mega-menu {
    visibility: visible;
    opacity: 1;

    transform:
            translate3d(0, 0, 0);

    pointer-events: auto;

    transition-delay: 0s;
}

.header__mega-inner {
    position: relative;

    width: 100%;
    min-height: 240px;

    padding: 30px 0 35px;

    overflow: hidden;

    background-color: #ffffff;
}

/* 드롭다운 최하단 연회색 구분선 */
.header__mega-inner::after {
    content: "";

    position: absolute;
    z-index: 2;

    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background-color:
            rgba(17, 17, 17, 0.12);

    pointer-events: none;
}

.header__mega-grid {
    position: relative;

    left:
            var(--mega-grid-left);

    width: max-content;
    margin: 0;

    display: grid;

    grid-template-columns:
    repeat(
      6,
      var(--nav-column-width)
    );

    column-gap:
            var(--nav-column-gap);

    align-items: start;
    justify-content: start;
}

.header__mega-column {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 13px;
}

.header__mega-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 3px 0;

    color: #333333;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.035em;
    text-align: center;

    white-space: nowrap;

    transition:
            color
            0.25s
            ease,

            font-weight
            0.25s
            ease;
}

.header__mega-link:hover,
.header__mega-link:focus-visible {
    color: var(--black);
    font-weight: 600;
}

.header__right {
    justify-self: end;

    height:
            calc(
                    var(--header-height) -
                    var(--header-top-space)
            );

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap:
            clamp(14px, 1.35vw, 22px);

    white-space: nowrap;
}

.interest-button {
    position: relative;
    z-index: 1;

    width: 11.5rem;
    height: 2.5rem;

    margin-right: 16px;
    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--black);
    background: transparent;
    border: 0;

    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.025em;

    isolation: isolate;
}

.interest-button::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 0;
    right: 0;

    width: 100%;
    height: 100%;

    border:
            1px solid #0f0f10;

    border-radius: 2.5rem;
    box-sizing: border-box;

    background: transparent;
}

.interest-button:hover,
.interest-button:focus-visible {
    color: var(--black);
    background: transparent;
}

.interest-button:hover::before,
.interest-button:focus-visible::before {
    border-color: #0f0f10;
    background: transparent;
}

.header__tel {
    height: 2.5rem;

    display: inline-flex;
    align-items: center;

    gap: 7px;
    flex: 0 0 auto;

    color: #231f20;
}

.header__tel-icon {
    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0;

    object-fit: none;

    flex: 0 0 auto;
    align-self: center;

    filter:
            brightness(0)
            saturate(100%)
            invert(11%)
            sepia(8%)
            saturate(561%)
            hue-rotate(295deg)
            brightness(94%)
            contrast(96%);
}

.header__tel-number {
    height: 2.5rem;

    display: inline-flex;
    align-items: center;

    font-family:
            "Yoon Gothic",
            "YoonGothic",
            "윤고딕",
            "Apple SD Gothic Neo",
            "Noto Sans KR",
            sans-serif;

    font-size:
            clamp(19px, 1.5vw, 24px);

    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.035em;
}

.header__tel-number strong {
    font-weight: 700;
}

.header__menu {
    position: relative;
    z-index: 3;

    height: 2.5rem;
    min-height: 2.5rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;
    flex: 0 0 auto;

    color: #231f20;

    transition:
            color
            0.3s
            ease;
}

.header__menu-text {
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;
}

.header__menu-dots {
    position: relative;

    width: 24px;
    height: 26px;

    display: block;
    flex: 0 0 24px;
}

.header__menu-dots span {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 3px;
    height: 3px;

    display: block;

    border-radius: 50%;
    background: #231f20;

    transition:
            width
            0.35s
            ease,

            height
            0.35s
            ease,

            opacity
            0.25s
            ease,

            border-radius
            0.35s
            ease,

            background-color
            0.3s
            ease,

            transform
            0.45s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            );
}

.header__menu-dots
span:nth-child(1) {
    transform:
            translate(-50%, -9px);
}

.header__menu-dots
span:nth-child(2) {
    transform:
            translate(-50%, -50%);
}

.header__menu-dots
span:nth-child(3) {
    transform:
            translate(-50%, 6px);
}

body.is-site-menu-open,
body.is-site-menu-closing {
    overflow: hidden;
}

body.is-site-menu-open
.header,
body.is-site-menu-closing
.header,
body.is-site-menu-open
.header.is-section-light,
body.is-site-menu-closing
.header.is-section-light {
    z-index: 210;

    color: #ffffff;

    background-color:
            transparent;

    border-bottom-color:
            transparent;

    backdrop-filter: none;

    -webkit-backdrop-filter:
            none;
}

body.is-site-menu-open
.header__nav,
body.is-site-menu-closing
.header__nav {
    visibility: hidden;
    opacity: 0;

    pointer-events: none;
}

body.is-site-menu-open
.interest-button,
body.is-site-menu-closing
.interest-button,
body.is-site-menu-open
.header__tel,
body.is-site-menu-closing
.header__tel {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}

body.is-site-menu-open
.interest-button,
body.is-site-menu-closing
.interest-button,
body.is-site-menu-open
.header__tel,
body.is-site-menu-closing
.header__tel,
body.is-site-menu-open
.header__tel-number,
body.is-site-menu-closing
.header__tel-number {
    color: #ffffff;
}

body.is-site-menu-open
.interest-button::before,
body.is-site-menu-closing
.interest-button::before {
    border-color: #ffffff;
    background: transparent;
}

body.is-site-menu-open
.header__tel-icon,
body.is-site-menu-closing
.header__tel-icon {
    filter:
            brightness(0)
            saturate(100%)
            invert(100%);
}

body.is-site-menu-open
.header__logo-image--default,
body.is-site-menu-closing
.header__logo-image--default {
    opacity: 0;
}

body.is-site-menu-open
.header__logo-image--gold,
body.is-site-menu-closing
.header__logo-image--gold {
    opacity: 1;

    filter:
            brightness(0)
            invert(1);
}

body.is-site-menu-open
.header__menu,
body.is-site-menu-closing
.header__menu {
    color: #ffffff;
}

body.is-site-menu-open
.header__menu-dots span,
body.is-site-menu-closing
.header__menu-dots span {
    background-color: #ffffff;
}

body.is-site-menu-open
.header__menu-dots
span:nth-child(1),
body.is-site-menu-closing
.header__menu-dots
span:nth-child(1) {
    width: 24px;
    height: 1px;

    border-radius: 0;

    transform:
            translate(-50%, -50%)
            rotate(45deg);
}

body.is-site-menu-open
.header__menu-dots
span:nth-child(2),
body.is-site-menu-closing
.header__menu-dots
span:nth-child(2) {
    opacity: 0;
}

body.is-site-menu-open
.header__menu-dots
span:nth-child(3),
body.is-site-menu-closing
.header__menu-dots
span:nth-child(3) {
    width: 24px;
    height: 1px;

    border-radius: 0;

    transform:
            translate(-50%, -50%)
            rotate(-45deg);
}

/* ========================================
   전체 어사이드 메뉴
======================================== */

.site-menu {
    position: fixed;
    z-index: 200;
    inset: 0;

    width: 100%;

    height: 100vh;
    height: 100svh;

    visibility: hidden;
    overflow: hidden;

    pointer-events: none;

    transition:
            visibility
            0s
            linear
            1.1s;
}

.site-menu::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0;

    background:
            rgba(0, 0, 0, 0.82);

    opacity: 0;

    transition:
            opacity
            1.15s
            cubic-bezier(
                    0.2,
                    0.82,
                    0.32,
                    1
            );
}

.site-menu.is-open {
    visibility: visible;

    pointer-events: auto;

    transition-delay: 0s;
}

.site-menu.is-open::before {
    opacity: 1;
}

.site-menu__surface {
    position: absolute;
    z-index: 1;
    inset: 0;

    width: 100%;
    height: 100%;

    border-radius:
            0 0 50% 50%;

    background: #000000;

    transform:
            translate3d(0, -108%, 0)
            scaleX(1.08);

    transform-origin:
            center top;

    transition:
            transform
            1.02s
            cubic-bezier(
                    0.58,
                    0.01,
                    0.12,
                    0.99
            ),

            border-radius
            1.02s
            cubic-bezier(
                    0.58,
                    0.01,
                    0.12,
                    0.99
            );

    will-change:
            transform,
            border-radius;
}

.site-menu.is-open
.site-menu__surface {
    border-radius: 0;

    transform:
            translate3d(0, 0, 0)
            scaleX(1);

    transition-timing-function:
            cubic-bezier(
                    0.38,
                    0.01,
                    0.08,
                    0.97
            );
}

.site-menu__scroll {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    padding:
            max(118px, 12vh)
            0
            54px;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior:
            contain;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;

    transform:
            translate3d(0, 1rem, 0);

    transition:
            opacity
            0.8s
            ease,

            transform
            0.8s
            ease;
}

.site-menu.is-open
.site-menu__scroll {
    opacity: 1;

    transform:
            translate3d(0, 0, 0);

    transition-delay:
            0.4s,
            0.4s;
}

.site-menu__nav {
    width:
            min(80%, 1300px);

    margin: auto;
}

.site-menu__list {
    width: 100%;
}

.site-menu__item {
    width: 100%;
    min-height: 92px;

    padding: 20px 0;

    display: grid;

    grid-template-columns:
    minmax(190px, 240px)
    minmax(0, 1fr);

    align-items: center;

    column-gap:
            clamp(32px, 4vw, 72px);

    border-bottom:
            1px solid
            rgba(255, 255, 255, 0.3);

    opacity: 0;

    transform:
            translate3d(0, 14px, 0);

    transition:
            opacity
            0.6s
            ease,

            transform
            0.6s
            var(--motion-ease);
}

.site-menu__item:last-child {
    border-bottom: 0;
}

.site-menu.is-open
.site-menu__item {
    opacity: 1;

    transform:
            translate3d(0, 0, 0);
}

.site-menu.is-open
.site-menu__item:nth-child(1) {
    transition-delay:
            0.4s,
            0.4s;
}

.site-menu.is-open
.site-menu__item:nth-child(2) {
    transition-delay:
            0.55s,
            0.55s;
}

.site-menu.is-open
.site-menu__item:nth-child(3) {
    transition-delay:
            0.7s,
            0.7s;
}

.site-menu.is-open
.site-menu__item:nth-child(4) {
    transition-delay:
            0.85s,
            0.85s;
}

.site-menu.is-open
.site-menu__item:nth-child(5) {
    transition-delay:
            1s,
            1s;
}

.site-menu.is-open
.site-menu__item:nth-child(6) {
    transition-delay:
            1.15s,
            1.15s;
}

.site-menu__title {
    display: inline-flex;
    justify-self: start;

    color: #ffffff;

    font-size:
            clamp(24px, 1.65vw, 30px);

    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;

    transition:
            color
            0.3s
            ease;
}

.site-menu__title:hover,
.site-menu__title:focus-visible {
    color: var(--gold);
}

.site-menu__sub {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;

    gap:
            clamp(16px, 1.7vw, 30px);

    min-width: 0;
}

.site-menu__sub-link {
    display: inline-flex;

    color:
            rgba(255, 255, 255, 0.38);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.035em;

    white-space: nowrap;

    transition:
            color
            0.3s
            ease;
}

.site-menu__sub-link:hover,
.site-menu__sub-link:focus-visible {
    color: #ffffff;
}

@media (max-width: 1600px) {
    .header {
        grid-template-columns:
      max-content
      minmax(0, 1fr)
      max-content;

        gap: 20px;
    }

    .header__nav-link,
    .header__mega-link {
        font-size: 13px;
    }

    .header__right {
        gap: 14px;
    }

    .interest-button {
        margin-right: 12px;
    }

    .header__tel-number {
        font-size: 19px;
    }
}

/* ========================================
   축소 화면 · 태블릿 가로
======================================== */

@media (max-width: 1760px) {
    .header {
        height: var(--header-height);

        padding:
                var(--header-top-space)
                var(--side-padding)
                0;

        grid-template-columns:
      minmax(0, 1fr)
      max-content;

        align-items: center;

        gap:
                clamp(18px, 3vw, 34px);
    }

    .header__logo {
        height:
                calc(
                        var(--header-height) -
                        var(--header-top-space)
                );
    }

    .header__nav,
    .header__mega-menu {
        display: none !important;
    }

    .header.is-section-light {
        background-color:
                rgba(255, 255, 255, 0.94);

        border-bottom:
                1px solid
                rgba(17, 17, 17, 0.08);

        backdrop-filter:
                blur(12px);

        -webkit-backdrop-filter:
                blur(12px);
    }

    .header__right {
        height:
                calc(
                        var(--header-height) -
                        var(--header-top-space)
                );

        gap:
                clamp(12px, 1.7vw, 22px);
    }

    .interest-button {
        width: 11.5rem;
        height: 38px;

        margin-right: 4px;
        padding: 0 20px;

        font-size: 14px;
    }

    .interest-button::before {
        border-radius: 38px;
    }

    .header__tel,
    .header__tel-number,
    .header__menu {
        height: 38px;
        min-height: 38px;
    }

    .header__tel-number {
        font-size:
                clamp(17px, 1.8vw, 21px);
    }

    .site-menu__scroll {
        padding-top:
                max(104px, 10vh);
    }

    .site-menu__nav {
        width:
                min(88%, 1120px);
    }

    .site-menu__item {
        grid-template-columns:
      minmax(165px, 210px)
      minmax(0, 1fr);

        column-gap:
                clamp(26px, 4vw, 56px);
    }

    .site-menu__sub {
        flex-wrap: wrap;
        row-gap: 10px;
    }
}

@media (max-width: 1100px) {
    .interest-button {
        display: none;
    }

    body.is-site-menu-open
    .interest-button,
    body.is-site-menu-closing
    .interest-button {
        width: 10.25rem;

        margin-right: 0;
        padding: 0 16px;

        display: inline-flex;

        font-size: 13px;
    }

    .header__right {
        gap: 16px;
    }

    .site-menu__nav {
        width:
                min(90%, 880px);
    }

    .site-menu__item {
        grid-template-columns:
      minmax(145px, 180px)
      minmax(0, 1fr);

        column-gap: 24px;
    }

    .site-menu__sub-link {
        font-size: 13px;
    }
}

@media (max-width: 860px) {
    .site-menu__scroll {
        padding:
                max(112px, 12vh)
                0
                46px;

        align-items: flex-start;
    }

    .site-menu__nav {
        width:
                min(86%, 680px);
    }

    .site-menu__item {
        min-height: 0;

        padding: 22px 0;

        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    .site-menu__title {
        justify-self: center;
    }

    .site-menu__sub {
        justify-content: center;
        flex-wrap: wrap;

        row-gap: 10px;
    }
}

@media (max-width: 767px) {
    .header {
        gap: 12px;
    }

    .header__right {
        gap: 9px;
    }

    .header__tel {
        width: 32px;
        height: 32px;
        min-height: 32px;

        justify-content: center;
    }

    .header__tel-number {
        display: none;
    }

    body.is-site-menu-open
    .header__tel,
    body.is-site-menu-closing
    .header__tel {
        width: auto;
    }

    body.is-site-menu-open
    .header__tel-number,
    body.is-site-menu-closing
    .header__tel-number {
        display: inline-flex;

        font-size: 15px;
    }

    body.is-site-menu-open
    .interest-button,
    body.is-site-menu-closing
    .interest-button {
        width: 9.25rem;
        height: 34px;
        min-height: 34px;

        padding: 0 12px;

        font-size: 12px;
    }

    .header__menu {
        height: 32px;
        min-height: 32px;

        gap: 6px;
    }

    .header__menu-text {
        font-size: 12px;
    }

    .site-menu__scroll {
        padding:
                max(94px, 11vh)
                0
                38px;
    }

    .site-menu__nav {
        width: 86%;
    }

    .site-menu__item {
        padding: 19px 0;

        row-gap: 14px;
    }

    .site-menu__title {
        font-size:
                clamp(22px, 6.5vw, 27px);
    }

    .site-menu__sub {
        column-gap: 17px;
    }

    .site-menu__sub-link {
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    body.is-site-menu-open
    .interest-button,
    body.is-site-menu-closing
    .interest-button {
        display: none;
    }
}

@media (max-width: 480px) {
    body.is-site-menu-open
    .header__tel-number,
    body.is-site-menu-closing
    .header__tel-number {
        font-size: 14px;
    }

    .header__menu-text {
        position: absolute;

        width: 1px;
        height: 1px;

        overflow: hidden;

        clip:
                rect(0 0 0 0);

        clip-path:
                inset(50%);

        white-space: nowrap;
    }

    .header__menu {
        width: 34px;
    }

    .header__menu-dots {
        width: 28px;
        flex-basis: 28px;
    }

    .site-menu__nav {
        width: 88%;
    }

    .site-menu__sub {
        column-gap: 14px;
    }
}

/* ========================================
   어두운 섹션 헤더
======================================== */

.header.is-section-dark:not(.is-nav-open) {
    color: #ffffff;
    background-color: transparent;
}

.header.is-section-dark:not(.is-nav-open)
.header__nav-link,
.header.is-section-dark:not(.is-nav-open)
.header__nav-item:hover >
.header__nav-link,
.header.is-section-dark:not(.is-nav-open)
.header__nav-item.is-active >
.header__nav-link {
    color: #ffffff;
}

.header.is-section-dark:not(.is-nav-open)
.interest-button,
.header.is-section-dark:not(.is-nav-open)
.header__tel,
.header.is-section-dark:not(.is-nav-open)
.header__tel-number,
.header.is-section-dark:not(.is-nav-open)
.header__menu {
    color: #ffffff;
}

.header.is-section-dark:not(.is-nav-open)
.interest-button::before {
    border-color: #ffffff;
}

.header.is-section-dark:not(.is-nav-open)
.header__tel-icon {
    filter:
            brightness(0)
            saturate(100%)
            invert(100%);
}

.header.is-section-dark:not(.is-nav-open)
.header__menu-dots span {
    background-color: #ffffff;
}

.header.is-section-dark:not(.is-nav-open)
.header__logo-image--default {
    opacity: 0;
}

.header.is-section-dark:not(.is-nav-open)
.header__logo-image--gold {
    opacity: 1;

    filter:
            brightness(0)
            invert(1);
}



/* ========================================
   전체 메뉴 레이어 안정화
======================================== */

.site-menu {
    z-index: 9998;
    isolation: isolate;
}

body.is-site-menu-open .site-menu,
body.is-site-menu-closing .site-menu {
    visibility: visible !important;
}

body.is-site-menu-open .site-menu {
    pointer-events: auto !important;
}

body.is-site-menu-open .header,
body.is-site-menu-closing .header {
    z-index: 9999 !important;
}

/* ========================================
   전체 메뉴 즉시 반응 보정
   헤더 테마 전환 지연과 별개로 클릭 직후 모션 시작
======================================== */

.site-menu::before {
    transition-duration: 0.52s;
}

.site-menu__surface {
    transition-duration: 0.78s, 0.78s;
}

.site-menu__scroll {
    transition-duration: 0.62s, 0.62s;
}

.site-menu.is-open .site-menu__scroll {
    transition-delay: 0.08s, 0.08s;
}

.site-menu__item {
    transition-duration: 0.5s, 0.5s;
}

.site-menu.is-open .site-menu__item:nth-child(1) {
    transition-delay: 0.1s, 0.1s;
}

.site-menu.is-open .site-menu__item:nth-child(2) {
    transition-delay: 0.16s, 0.16s;
}

.site-menu.is-open .site-menu__item:nth-child(3) {
    transition-delay: 0.22s, 0.22s;
}

.site-menu.is-open .site-menu__item:nth-child(4) {
    transition-delay: 0.28s, 0.28s;
}

.site-menu.is-open .site-menu__item:nth-child(5) {
    transition-delay: 0.34s, 0.34s;
}

.site-menu.is-open .site-menu__item:nth-child(6) {
    transition-delay: 0.4s, 0.4s;
}


/* ========================================
   햄버거 메뉴 클릭 시 헤더 색상 즉시 적용
   섹션 스크롤용 색상 전환 타이밍은 메뉴 오픈에 사용하지 않음
======================================== */

body.is-site-menu-theme-instant .header,
body.is-site-menu-theme-instant .header__logo-image,
body.is-site-menu-theme-instant .header__nav,
body.is-site-menu-theme-instant .header__nav-link,
body.is-site-menu-theme-instant .interest-button,
body.is-site-menu-theme-instant .interest-button::before,
body.is-site-menu-theme-instant .header__tel,
body.is-site-menu-theme-instant .header__tel-number,
body.is-site-menu-theme-instant .header__tel-icon,
body.is-site-menu-theme-instant .header__menu,
body.is-site-menu-theme-instant .header__menu-dots span {
    transition: none !important;
}

/* ========================================
   전체 메뉴 최초 클릭 visibility 지연 제거
   닫힘 모션은 body의 closing 클래스와 JS 타이머가 담당
======================================== */

.site-menu {
    transition: none !important;
}

.site-menu.is-open,
body.is-site-menu-open .site-menu,
body.is-site-menu-closing .site-menu {
    visibility: visible !important;
}

body:not(.is-site-menu-open):not(.is-site-menu-closing)
.site-menu:not(.is-open) {
    visibility: hidden !important;
}

/* ========================================
   전체 메뉴 닫힘 후 헤더 부드러운 복원
======================================== */

.header__nav {
    transition:
            opacity
            0.72s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ),

            visibility
            0s
            linear
            0s;
}

body.is-site-menu-open
.header__nav,
body.is-site-menu-closing
.header__nav {
    transition:
            opacity
            0.26s
            ease,

            visibility
            0s
            linear
            0.26s;
}

body.is-site-menu-header-restoring
.header__logo-image {
    transition:
            opacity
            0.72s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ) !important;
}

body.is-site-menu-header-restoring
.header__nav {
    visibility: visible;

    transition:
            opacity
            0.72s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ),

            visibility
            0s
            linear
            0s !important;
}

body.is-site-menu-header-restoring
.header__nav-link,
body.is-site-menu-header-restoring
.interest-button,
body.is-site-menu-header-restoring
.header__tel,
body.is-site-menu-header-restoring
.header__tel-number,
body.is-site-menu-header-restoring
.header__menu {
    transition:
            color
            0.72s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ),

            opacity
            0.72s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ) !important;
}

body.is-site-menu-header-restoring
.interest-button::before {
    transition:
            border-color
            0.72s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ),

            background-color
            0.72s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ) !important;
}

body.is-site-menu-header-restoring
.header__tel-icon {
    transition:
            filter
            0.72s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ),

            opacity
            0.72s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ) !important;
}

body.is-site-menu-header-restoring
.header__menu-dots span {
    transition-duration:
            0.5s,
            0.5s,
            0.38s,
            0.5s,
            0.72s,
            0.62s !important;

    transition-timing-function:
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.is-site-menu-header-restoring
    .header__logo-image,
    body.is-site-menu-header-restoring
    .header__nav,
    body.is-site-menu-header-restoring
    .header__nav-link,
    body.is-site-menu-header-restoring
    .interest-button,
    body.is-site-menu-header-restoring
    .interest-button::before,
    body.is-site-menu-header-restoring
    .header__tel,
    body.is-site-menu-header-restoring
    .header__tel-number,
    body.is-site-menu-header-restoring
    .header__tel-icon,
    body.is-site-menu-header-restoring
    .header__menu,
    body.is-site-menu-header-restoring
    .header__menu-dots span {
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   요청 반영 최종 보정
   - 어사이드 대메뉴는 안내용 텍스트로만 사용
   - 클릭 및 hover 색상 변화 비활성화
======================================== */

.site-menu__title,
.site-menu__title:hover,
.site-menu__title:focus,
.site-menu__title:focus-visible,
.site-menu__title:active {
    color: #ffffff !important;
    pointer-events: none;
    cursor: default;
    user-select: none;
    transition: none !important;
}

/* ========================================
   헤더·드롭다운·어사이드 최종 보정
======================================== */

/* 드롭다운은 기본 Regular, hover 시 부드럽게 굵어집니다. */
.header__mega-link {
    font-weight: 400;
    font-variation-settings: "wght" 400;
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: currentColor;

    transition:
            color 0.32s ease,
            font-weight 0.32s ease,
            font-variation-settings 0.32s ease,
            -webkit-text-stroke-width 0.32s ease;
}

.header__mega-link:hover,
.header__mega-link:focus-visible {
    color: var(--black);
    font-weight: 500;
    font-variation-settings: "wght" 500;
    -webkit-text-stroke-width: 0.18px;
}

/* 어사이드 소메뉴 글자를 한 단계 키웁니다. */
.site-menu__sub-link {
    font-size: 15px;
}

@media (max-width: 1100px) {
    .site-menu__sub-link {
        font-size: 14px;
    }
}



/* ========================================
   모바일 전용 헤더 로고 최종 보정
   - 기본/어두운 배경: ./img/m/m_logo.png
   - 흰색 헤더 배경: ./img/m_m_logo_gold.png
======================================== */

.header__logo-mobile {
    display: none;

    grid-column: 1;
    grid-row: 1;

    opacity: 0;
    pointer-events: none;
}

@media (max-width: 767px) {
    .header__logo-picture,
    .header__logo-image--gold {
        display: none !important;
    }

    .header__logo-mobile {
        display: block;

        width: auto !important;
        height: auto !important;

        max-width: none !important;
        max-height: none !important;

        object-fit: contain;
        filter: none !important;
    }

    .header .header__logo-mobile--default,
    .header.is-section-dark:not(.is-nav-open)
    .header__logo-mobile--default {
        opacity: 1;
    }

    .header .header__logo-mobile--gold,
    .header.is-section-dark:not(.is-nav-open)
    .header__logo-mobile--gold {
        opacity: 0;
    }

    .header.is-section-light
    .header__logo-mobile--default,
    .header.is-nav-open
    .header__logo-mobile--default {
        opacity: 0;
    }

    .header.is-section-light
    .header__logo-mobile--gold,
    .header.is-nav-open
    .header__logo-mobile--gold {
        opacity: 1;
    }

    body.is-site-menu-open
    .header__logo-mobile--default,
    body.is-site-menu-closing
    .header__logo-mobile--default {
        opacity: 1;
    }

    body.is-site-menu-open
    .header__logo-mobile--gold,
    body.is-site-menu-closing
    .header__logo-mobile--gold {
        opacity: 0;
    }
}

/* ========================================
   모바일 헤더 최종 보정
   - 드파인 아르티아 모바일 기준: 기본 72px / 스크롤 후 57px
   - 흰 배경에서는 동일 로고 이미지를 검정색으로 렌더링
======================================== */

@media (max-width: 767px) {
    .header {
        height: 72px;
        padding-top: 0;
        align-items: center;

        transition:
                height 0.3s ease,
                padding 0.3s ease,
                background-color 0.3s ease;
    }

    .header.is-section-light,
    .header.is-section-dark {
        height: 57px;
        padding-top: 0;
    }

    .header__logo,
    .header__right,
    .header.is-section-light .header__logo,
    .header.is-section-light .header__right,
    .header.is-section-dark .header__logo,
    .header.is-section-dark .header__right {
        height: 100%;
    }

    .header__logo-stack {
        width: 136px;
    }

    .header__logo-mobile {
        width: 136px !important;
        height: auto !important;
        max-width: 136px !important;
        object-fit: contain;
    }

    /* 골드 이미지를 따로 사용하지 않고 같은 모바일 로고를 검정으로 입힙니다. */
    .header__logo-mobile--gold {
        filter: brightness(0) saturate(100%) !important;
    }

    .header.is-section-light:not(.is-nav-open) {
        background-color: rgba(255, 255, 255, 0.96);
    }
}

/* ========================================
   PC 서브페이지 로고 최종 보정
   - 메인 이외 페이지는 ./img/logo_gold.png 사용
======================================== */

@media (min-width: 768px) {
    body.is-sub-page:not(.is-site-menu-open):not(.is-site-menu-closing)
    .header__logo-picture {
        opacity: 0 !important;
    }

    body.is-sub-page:not(.is-site-menu-open):not(.is-site-menu-closing)
    .header__logo-image--gold {
        opacity: 1 !important;
        filter: none !important;
    }

    /* 전체 메뉴의 어두운 배경에서는 기존처럼 흰색으로 표시 */
    body.is-sub-page.is-site-menu-open
    .header__logo-image--gold,
    body.is-sub-page.is-site-menu-closing
    .header__logo-image--gold {
        opacity: 1 !important;
        filter: brightness(0) invert(1) !important;
    }
}

/* ========================================
   모바일 어사이드 메뉴 - 드파인 아르티아 톤 적용
   - 767px 이하에서만 적용
   - PC 어사이드 디자인은 유지
======================================== */

@media (max-width: 767px) {
    .site-menu,
    .site-menu::before,
    .site-menu__surface {
        background: #000000;
    }

    .site-menu::before {
        opacity: 1;
        transition: none;
    }

    .site-menu__surface {
        border-radius: 0;
        transform: translate3d(0, -102%, 0);
        transform-origin: center top;
        transition: transform 1s cubic-bezier(0.641, 0.005, 0.095, 1.05);
    }

    .site-menu.is-open .site-menu__surface {
        border-radius: 0;
        transform: translate3d(0, 0, 0);
    }

    .site-menu__scroll {
        padding:
                max(86px, calc(var(--header-height) + 24px))
                0
                max(28px, env(safe-area-inset-bottom));

        align-items: flex-start;
    }

    .site-menu.is-open .site-menu__scroll {
        transition-delay: 0.28s, 0.28s;
    }

    .site-menu__nav {
        width: 100%;
        max-width: none;
        padding-right: 24px;
        padding-left: 24px;
    }

    .site-menu__list {
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.28);
    }

    .site-menu__item {
        min-height: 0;
        padding: 20px 0 18px;

        display: flex;
        flex-direction: column;
        align-items: center;

        row-gap: 14px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    }

    .site-menu__item:last-child {
        border-bottom: 0;
    }

    .site-menu__title,
    .site-menu__title:hover,
    .site-menu__title:focus,
    .site-menu__title:focus-visible,
    .site-menu__title:active {
        justify-self: auto;

        color: #ffffff !important;

        font-size: clamp(21px, 5.9vw, 25px);
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.025em;

        text-align: center;
    }

    .site-menu__sub {
        width: 100%;
        padding-top: 14px;

        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        column-gap: 19px;
        row-gap: 9px;

        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .site-menu__sub-link,
    .site-menu__sub-link:hover,
    .site-menu__sub-link:focus-visible {
        color: rgba(255, 255, 255, 0.72);

        font-size: 15px;
        font-weight: 400;
        line-height: 1.45;
        letter-spacing: -0.035em;

        white-space: normal;
        text-align: center;

        transition: none;
    }

    /* 모바일 전체 메뉴에서는 로고와 닫기 버튼만 남겨 상단을 단정하게 구성 */
    body.is-site-menu-open .header__tel,
    body.is-site-menu-closing .header__tel,
    body.is-site-menu-open .interest-button,
    body.is-site-menu-closing .interest-button {
        display: none !important;
    }

    body.is-site-menu-open .header__right,
    body.is-site-menu-closing .header__right {
        gap: 0;
    }

    .site-menu.is-open .site-menu__item:nth-child(1) {
        transition-delay: 0.30s, 0.30s;
    }

    .site-menu.is-open .site-menu__item:nth-child(2) {
        transition-delay: 0.38s, 0.38s;
    }

    .site-menu.is-open .site-menu__item:nth-child(3) {
        transition-delay: 0.46s, 0.46s;
    }

    .site-menu.is-open .site-menu__item:nth-child(4) {
        transition-delay: 0.54s, 0.54s;
    }

    .site-menu.is-open .site-menu__item:nth-child(5) {
        transition-delay: 0.62s, 0.62s;
    }

    .site-menu.is-open .site-menu__item:nth-child(6) {
        transition-delay: 0.70s, 0.70s;
    }
}

@media (max-width: 480px) {
    .site-menu__nav {
        padding-right: 20px;
        padding-left: 20px;
    }

    .site-menu__item {
        padding-top: 18px;
        padding-bottom: 16px;
    }

    .site-menu__sub {
        column-gap: 15px;
    }

    .site-menu__sub-link,
    .site-menu__sub-link:hover,
    .site-menu__sub-link:focus-visible {
        font-size: 14px;
    }
}

/* ========================================
   서브페이지 스크롤 방향 헤더
   - 아래로 스크롤: 화면 위로 숨김
   - 위로 스크롤: 즉시 다시 표시
   - 메인 페이지 및 전체 메뉴 오픈 상태 제외
======================================== */

body.is-sub-page .header {
    transform: translate3d(0, 0, 0);
    will-change: transform;

    transition:
            transform
            0.72s
            cubic-bezier(
                    0.65,
                    0,
                    0.35,
                    1
            ),

            background-color
            0.3s
            ease,

            height
            0.3s
            ease,

            padding
            0.3s
            ease;
}

body.is-sub-page .header.is-scroll-hidden {
    transform: translate3d(0, calc(-100% - 2px), 0);
    pointer-events: none;
}

body.is-sub-page.is-site-menu-open .header,
body.is-sub-page.is-site-menu-closing .header,
body.is-sub-page .header.is-nav-open {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    body.is-sub-page .header {
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   모바일 어사이드 메뉴 - 드파인 아르티아 원본 수치 적용
   참조: menu.css의 site_wrap / site_map / site_list 모바일 규칙
======================================== */

@media (max-width: 767px) {
    .site-menu {
        background: transparent;
    }

    .site-menu::before {
        z-index: 0;

        background-color: #000000;
        opacity: 0;

        transition:
                opacity
                1.33s
                cubic-bezier(
                        0.26,
                        1,
                        0.48,
                        1
                );
    }

    .site-menu.is-open::before,
    body.is-site-menu-closing
    .site-menu::before {
        opacity: 0.85;
    }

    .site-menu__surface {
        z-index: 1;

        border-radius: 100%;
        background-color: #000000;

        transform:
                translate3d(
                        0,
                        -100%,
                        0
                );

        transform-origin:
                center top;

        transition:
                transform
                1s
                cubic-bezier(
                        0.641,
                        0.005,
                        0.095,
                        1.05
                ),

                border-radius
                1s
                cubic-bezier(
                        0.641,
                        0.005,
                        0.095,
                        1.05
                );
    }

    .site-menu.is-open
    .site-menu__surface {
        border-radius: 0;

        transform:
                translate3d(
                        0,
                        0,
                        0
                );

        transition-timing-function:
                cubic-bezier(
                        0.41,
                        0.005,
                        0.095,
                        0.95
                );
    }

    .site-menu__scroll {
        z-index: 2;

        height: 100%;
        padding:
                max(72px, env(safe-area-inset-top))
                0
                max(24px, env(safe-area-inset-bottom));

        display: flex;
        align-items: flex-start;
        justify-content: center;

        opacity: 0;

        transform:
                translate3d(
                        0,
                        1rem,
                        0
                );

        transition:
                opacity
                0.8s
                ease,

                transform
                0.8s
                ease;
    }

    .site-menu.is-open
    .site-menu__scroll {
        opacity: 1;

        transform:
                translate3d(
                        0,
                        0,
                        0
                );

        transition-delay:
                0.4s,
                0.4s;
    }

    .site-menu__nav {
        width: 80%;
        max-width: 1300px;
        margin: auto;
        padding: 0;
    }

    .site-menu__list {
        width: 100%;
        border: 0;
    }

    .site-menu__item {
        width: 100%;
        min-height: 0;
        height: auto;
        margin: 0;
        padding: 1.375rem 0;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        row-gap: 0;

        overflow: hidden;
        opacity: 0;

        color: #ffffff;
        border-bottom:
                1px solid
                rgba(255, 255, 255, 0.3);

        transform: none;

        transition:
                opacity
                0.6s
                ease;
    }

    .site-menu__item:last-child {
        border-bottom: 0;
    }

    .site-menu.is-open
    .site-menu__item {
        opacity: 1;
        transform: none;
    }

    .site-menu.is-open
    .site-menu__item:nth-child(1) {
        transition-delay: 0.4s;
    }

    .site-menu.is-open
    .site-menu__item:nth-child(2) {
        transition-delay: 0.55s;
    }

    .site-menu.is-open
    .site-menu__item:nth-child(3) {
        transition-delay: 0.7s;
    }

    .site-menu.is-open
    .site-menu__item:nth-child(4) {
        transition-delay: 0.85s;
    }

    .site-menu.is-open
    .site-menu__item:nth-child(5) {
        transition-delay: 1s;
    }

    .site-menu.is-open
    .site-menu__item:nth-child(6) {
        transition-delay: 1.15s;
    }

    .site-menu__title,
    .site-menu__title:hover,
    .site-menu__title:focus,
    .site-menu__title:focus-visible,
    .site-menu__title:active {
        position: relative;

        width: auto;
        min-height: 0;
        padding: 0 3rem;

        display: inline-block;

        color: #ffffff !important;

        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0;
        text-align: center;

        pointer-events: auto;
        cursor: pointer;
        user-select: none;

        transition: none !important;
    }

    .site-menu__title::before,
    .site-menu__title::after {
        content: none !important;
        display: none !important;
    }

    .site-menu__sub {
        position: relative;
        right: auto;
        left: auto;

        width: 100%;
        max-height: 0;
        margin-top: 0;
        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        column-gap: 0;
        row-gap: 0;

        overflow: hidden;
        visibility: hidden;
        opacity: 0;

        border-top:
                1px solid
                transparent;

        transform:
                translate3d(
                        0,
                        -0.5rem,
                        0
                );

        pointer-events: none;

        transition:
                max-height
                0.48s
                cubic-bezier(
                        0.22,
                        1,
                        0.36,
                        1
                ),

                margin-top
                0.48s
                cubic-bezier(
                        0.22,
                        1,
                        0.36,
                        1
                ),

                opacity
                0.34s
                ease,

                transform
                0.48s
                cubic-bezier(
                        0.22,
                        1,
                        0.36,
                        1
                ),

                border-color
                0.3s
                ease,

                visibility
                0s
                linear
                0.48s;
    }

    .site-menu__item.is-accordion-open
    .site-menu__sub {
        max-height:
                var(
                        --site-menu-sub-height,
                        440px
                );

        margin-top: 1.5rem;

        visibility: visible;
        opacity: 1;

        border-top-color:
                rgba(255, 255, 255, 0.3);

        transform:
                translate3d(
                        0,
                        0,
                        0
                );

        pointer-events: auto;

        transition-delay:
                0s,
                0s,
                0.06s,
                0s,
                0s,
                0s;
    }

    .site-menu__sub > li {
        width: calc(100% - 8rem);
        margin: 0;
        padding: 0.375rem 0;

        color:
                rgba(255, 255, 255, 0.3);

        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.4;
        text-align: center;
    }

    .site-menu__sub > li:first-child {
        padding-top: 1.5rem;
    }

    .site-menu__sub > li:last-child {
        padding-bottom: 0;
    }

    .site-menu__sub-link,
    .site-menu__sub-link:hover,
    .site-menu__sub-link:focus-visible {
        display: inline;

        color:
                rgba(255, 255, 255, 0.3);

        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: 0;
        text-align: center;
        white-space: normal;

        transition:
                color
                0.3s
                ease;
    }

    .site-menu__sub-link:active,
    .site-menu__sub-link:focus-visible {
        color: #ffffff;
    }

    .site-menu__item.is-accordion-open
    .site-menu__title {
        color: #ffffff !important;
    }

    body.is-site-menu-open
    .header__tel,
    body.is-site-menu-closing
    .header__tel,
    body.is-site-menu-open
    .interest-button,
    body.is-site-menu-closing
    .interest-button {
        display: none !important;
    }

    body.is-site-menu-open
    .header__right,
    body.is-site-menu-closing
    .header__right {
        gap: 0;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .site-menu::before,
    .site-menu__surface,
    .site-menu__scroll,
    .site-menu__item,
    .site-menu__sub {
        transition-duration:
                0.01ms
        !important;
    }
}

/* ========================================
   모바일 서브페이지 헤더 로고 블랙 고정
   - 일반/스크롤 상태: 블랙 로고
   - 어사이드 오픈 상태: 기존 흰색 로고 유지
======================================== */

@media (max-width: 767px) {
    body.is-sub-page:not(.is-site-menu-open):not(.is-site-menu-closing)
    .header__logo-mobile--default {
        opacity: 0 !important;
    }

    body.is-sub-page:not(.is-site-menu-open):not(.is-site-menu-closing)
    .header__logo-mobile--gold {
        opacity: 1 !important;
        filter: brightness(0) saturate(100%) !important;
    }

    body.is-sub-page.is-site-menu-open
    .header__logo-mobile--default,
    body.is-sub-page.is-site-menu-closing
    .header__logo-mobile--default {
        opacity: 1 !important;
        filter: none !important;
    }

    body.is-sub-page.is-site-menu-open
    .header__logo-mobile--gold,
    body.is-sub-page.is-site-menu-closing
    .header__logo-mobile--gold {
        opacity: 0 !important;
    }
}

/* ========================================
   헤더 폰트 최종 보정
   - 헤더·드롭다운·전체 메뉴: Noto Sans KR
   - PC 대메뉴: Noto Sans KR Medium
======================================== */

.header,
.header__mega-menu,
.site-menu {
    font-family:
            "Noto Sans KR",
            "Apple SD Gothic Neo",
            Arial,
            Helvetica,
            sans-serif;
}

.header__nav-link {
    font-family:
            "Noto Sans KR",
            "Apple SD Gothic Neo",
            Arial,
            Helvetica,
            sans-serif;

    font-weight: 500;
}

.header__tel-number {
    font-family:
            "Noto Sans KR",
            "Apple SD Gothic Neo",
            Arial,
            Helvetica,
            sans-serif;
}

/* ========================================
   햄버거 메뉴 디테일 최종 보정
   - 닫기 클릭 직후 X → 점 3개 복원 시작
   - menu 글자와 아이콘 간격·자간 축소
======================================== */

.header__menu {
    gap: 4px;
}

.header__menu-text {
    letter-spacing: -0.015em;
}

/* 닫힘 애니메이션 중에는 X 상태를 끝까지 유지하지 않고
   클릭 직후 점 3개 형태로 돌아가기 시작합니다. */
body.is-site-menu-closing
.header__menu-dots span:nth-child(1) {
    width: 3px;
    height: 3px;

    opacity: 1;

    border-radius: 50%;

    transform:
            translate(-50%, -9px);
}

body.is-site-menu-closing
.header__menu-dots span:nth-child(2) {
    width: 3px;
    height: 3px;

    opacity: 1;

    border-radius: 50%;

    transform:
            translate(-50%, -50%);
}

body.is-site-menu-closing
.header__menu-dots span:nth-child(3) {
    width: 3px;
    height: 3px;

    opacity: 1;

    border-radius: 50%;

    transform:
            translate(-50%, 6px);
}

/* ========================================
   어사이드 닫기 직후 헤더 상태 복원
   - 닫기 클릭과 동시에 현재 섹션의 원래 헤더 색상으로 복원
   - 어사이드 자체의 닫힘 속도는 그대로 유지
======================================== */

/* 기본·밝은 섹션 */
body.is-site-menu-closing
.header:not(.is-section-dark) {
    color: var(--black);
}

body.is-site-menu-closing
.header:not(.is-section-dark)
.interest-button,
body.is-site-menu-closing
.header:not(.is-section-dark)
.header__tel,
body.is-site-menu-closing
.header:not(.is-section-dark)
.header__tel-number,
body.is-site-menu-closing
.header:not(.is-section-dark)
.header__menu {
    color: #231f20;
}

body.is-site-menu-closing
.header:not(.is-section-dark)
.interest-button::before {
    border-color: #0f0f10;
    background: transparent;
}

body.is-site-menu-closing
.header:not(.is-section-dark)
.header__tel-icon {
    filter:
            brightness(0)
            saturate(100%)
            invert(11%)
            sepia(8%)
            saturate(561%)
            hue-rotate(295deg)
            brightness(94%)
            contrast(96%);
}

body.is-site-menu-closing
.header:not(.is-section-dark)
.header__menu-dots span {
    background-color: #231f20;
}

/* 기본 섹션 로고 */
body.is-site-menu-closing
.header:not(.is-section-light):not(.is-section-dark)
.header__logo-image--default {
    opacity: 1;
}

body.is-site-menu-closing
.header:not(.is-section-light):not(.is-section-dark)
.header__logo-image--gold {
    opacity: 0;
    filter: none;
}

/* 밝은 섹션 로고 */
body.is-site-menu-closing
.header.is-section-light
.header__logo-image--default {
    opacity: 0;
}

body.is-site-menu-closing
.header.is-section-light
.header__logo-image--gold {
    opacity: 1;
    filter: none;
}

/* 어두운 섹션은 원래 흰색 헤더 상태 유지 */
body.is-site-menu-closing
.header.is-section-dark {
    color: #ffffff;
    background-color: transparent;
    border-bottom-color: transparent;
}

body.is-site-menu-closing
.header.is-section-dark
.interest-button,
body.is-site-menu-closing
.header.is-section-dark
.header__tel,
body.is-site-menu-closing
.header.is-section-dark
.header__tel-number,
body.is-site-menu-closing
.header.is-section-dark
.header__menu {
    color: #ffffff;
}

body.is-site-menu-closing
.header.is-section-dark
.interest-button::before {
    border-color: #ffffff;
}

body.is-site-menu-closing
.header.is-section-dark
.header__tel-icon {
    filter:
            brightness(0)
            saturate(100%)
            invert(100%);
}

body.is-site-menu-closing
.header.is-section-dark
.header__menu-dots span {
    background-color: #ffffff;
}

body.is-site-menu-closing
.header.is-section-dark
.header__logo-image--default {
    opacity: 0;
}

body.is-site-menu-closing
.header.is-section-dark
.header__logo-image--gold {
    opacity: 1;
    filter:
            brightness(0)
            invert(1);
}

/* PC 서브페이지는 기존 골드 로고 상태로 즉시 복원 */
@media (min-width: 768px) {
    body.is-sub-page.is-site-menu-closing
    .header__logo-picture {
        opacity: 0 !important;
    }

    body.is-sub-page.is-site-menu-closing
    .header__logo-image--gold {
        opacity: 1 !important;
        filter: none !important;
    }
}

/* 축소 헤더의 밝은 섹션 배경도 즉시 복원 */
@media (max-width: 1760px) {
    body.is-site-menu-closing
    .header.is-section-light {
        background-color:
                rgba(255, 255, 255, 0.94);

        border-bottom:
                1px solid
                rgba(17, 17, 17, 0.08);

        backdrop-filter:
                blur(12px);

        -webkit-backdrop-filter:
                blur(12px);
    }
}

/* 모바일 메인·서브페이지 로고도 닫기 즉시 원래 상태로 복원 */
@media (max-width: 767px) {
    body.is-main-page.is-site-menu-closing
    .header:not(.is-section-light)
    .header__logo-mobile--default {
        opacity: 1 !important;
        filter: none !important;
    }

    body.is-main-page.is-site-menu-closing
    .header:not(.is-section-light)
    .header__logo-mobile--gold {
        opacity: 0 !important;
    }

    body.is-main-page.is-site-menu-closing
    .header.is-section-light
    .header__logo-mobile--default,
    body.is-sub-page.is-site-menu-closing
    .header__logo-mobile--default {
        opacity: 0 !important;
    }

    body.is-main-page.is-site-menu-closing
    .header.is-section-light
    .header__logo-mobile--gold,
    body.is-sub-page.is-site-menu-closing
    .header__logo-mobile--gold {
        opacity: 1 !important;

        filter:
                brightness(0)
                saturate(100%)
        !important;
    }
}

/* ========================================
   PC 로고·menu 버튼 상단선 정렬
   - 로고 이미지 윗선과 오른쪽 menu 버튼 윗선을 같은 가로선에 배치
   - 모바일 정렬은 기존 상태 유지
======================================== */

@media (min-width: 1761px) {
    .header__logo {
        align-items: flex-start;
    }

    .header__logo-stack {
        margin-top:
                calc(
                        (
                        var(--header-height) -
                        var(--header-top-space) -
                        2.5rem
                        ) /
                        2
                );
    }
}

@media (min-width: 768px) and (max-width: 1760px) {
    .header__logo {
        align-items: flex-start;
    }

    .header__logo-stack {
        margin-top:
                calc(
                        (
                        var(--header-height) -
                        var(--header-top-space) -
                        38px
                        ) /
                        2
                );
    }
}

/* ========================================
   백화 페이지처럼 차분한 관성 스크롤
======================================== */

html.lenis,
html.lenis body {
    height: auto;
}

html.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

html.lenis.lenis-smooth body {
    overscroll-behavior-y: none;
}

html.lenis.lenis-stopped {
    overflow: hidden;
}

html.lenis.lenis-smooth iframe {
    pointer-events: none;
}

html.is-native-page-scroll {
    scroll-behavior: smooth;
}

@media (max-width: 767px) {
    html.is-native-page-scroll {
        scroll-behavior: auto;
    }

    html.is-native-page-scroll,
    html.is-native-page-scroll body {
        overscroll-behavior-y: auto;
        touch-action: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.site-menu__scroll,
.site-menu__sub,
[data-lenis-prevent] {
    overscroll-behavior: contain;
}

@media (max-width: 767px) {
    html.lenis,
    html.lenis body {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    body {
        scroll-behavior: auto !important;
    }
}

/* ========================================
   서브페이지 공통 이미지 페이드업
======================================== */

body.is-sub-page main .sub-image-reveal {
    opacity: 0;
    filter: blur(4px);

    transform:
            translate3d(0, 38px, 0);

    transition:
            opacity
            1.25s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ),

            filter
            1.25s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            ),

            transform
            1.4s
            cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
            );

    will-change:
            opacity,
            filter,
            transform;
}

body.is-sub-page main
.sub-image-reveal.is-visible {
    opacity: 1;
    filter: blur(0);

    transform:
            translate3d(0, 0, 0);
}

@media (max-width: 767px) {
    body.is-sub-page main
    .sub-image-reveal {
        transform:
                translate3d(0, 28px, 0);
    }

    body.is-sub-page main
    .sub-image-reveal.is-visible {
        transform:
                translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.is-sub-page main
    .sub-image-reveal {
        opacity: 1 !important;
        filter: none !important;

        transform:
                none !important;

        transition:
                none !important;
    }
}




/* =========================================================
   HEADER NAV 위치 조정
   상단 6개 메뉴 + 하단 드롭다운 6개 메뉴 동일 이동
========================================================= */
@media (min-width: 768px) {
    :root {
        --header-nav-shift-x: -180px;
    }

    /* 상단
       OVERVIEW / PREMIUM / UNIT / PLAN / INFO / MEDIA
    */
    .header__nav {
        transform: translateX(var(--header-nav-shift-x));
    }

    /* 펼쳐지는 드롭다운 메뉴 전체
       사업개요 / 입지환경 / CLUB RICHESSE / 평면안내 등
    */
    .header__mega-inner {
        transform: translateX(var(--header-nav-shift-x));
    }
}