@charset "utf-8";

/* 공통 레이아웃 - layout */
.inner {position: relative; width: 100%; max-width: 1440px; margin: 0 auto;
    @media (width <= 1480px) {max-width: calc(100% - 48px);}
}

/* 헤더 레이아웃 - header */
header {position: fixed; top: 0; left: 0; width: 100%; z-index: 9;
    & .header-wrap {position: relative; display: flex; justify-content: space-between; align-items: center; height: var(--header-height); padding: 0 100px; transition: var(--basic-delay);
        &::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--basic-white); transition: var(--basic-delay); z-index: -1;}
        & .logo {
            & a {max-width: 100px;}
            & a img {filter: brightness(0) invert(1);}
        }
        & .gnb {
            > ul {display: flex; gap: 24px;
                > li {}
                > li button {font-weight: 600; color: var(--basic-white);}
            }
        }
        & .hm {display: none;
            & .hm-bt {position: relative; display: block; width: 24px; height: 16px;
                & span {position: absolute; left: 50%; display: block; width: 100%; height: 2px; border-radius: 4px; background: var(--basic-white); transition: var(--basic-delay);
                    &:nth-child(1) {top: 0; transform: translate(-50%, 0);}
                    &:nth-child(2) {top: 50%; transform: translate(-50%, -50%);}
                    &:nth-child(3) {top: 50%; transform: translate(-50%, -50%);}
                    &:nth-child(4) {bottom: 0; transform: translate(-50%, 0);}
                }
            }
            & .hm-wrap {position: fixed; top: 0; left: 0; width: 100%; height: var(--view-height); display: flex; flex-direction: column; padding: var(--header-height) 24px 24px; background: #191919; z-index: -1;
                & .deco {position: absolute; top: 50%; right: 24px; transform: translateY(-50%); writing-mode: vertical-lr;
                    & p {font-size: 18px; font-weight: 600; color: var(--basic-white); letter-spacing: 0.5rem;}
                    & p strong {font-weight: 600; color: var(--key-mint);}
                }
                & .list {flex: 1;
                    > ul {display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; gap: 16px;
                        > li {}
                        > li button {font-size: 24px; font-weight: 700; color: var(--basic-white);}
                    }
                }
                & .copy {
                    & p {font-size: 15px; color: rgba(255, 255, 255, 0.5);}
                    & span {font-size: 12px; color: rgba(255, 255, 255, 0.3);}
                }
            }
            &.on {
                & .hm-bt {
                    & span {
                        &:nth-child(1) {width: 0; opacity: 0;}
                        &:nth-child(2) {transform: translate(-50%, -50%) rotate(45deg);}
                        &:nth-child(3) {transform: translate(-50%, -50%) rotate(-45deg);}
                        &:nth-child(4) {width: 0; opacity: 0;}
                    }
                }
            }
        }
    }
    &.header-scroll {
        & .header-wrap {
            &::before {height: 100%; box-shadow: var(--basic-shadow);}
            & .logo {
                & a img {filter: none;}
            }
            & .gnb {
                > ul {
                    > li button {color: var(--basic-dark);}
                }
            }
            & .hm {
                & .hm-bt span {background: var(--basic-dark);}
            }
        }
    }
    &.header-hide {
        & .header-wrap {transform: translateY(calc(var(--header-height) * -1));}
        & .header-wrap:has(.hm.on) {transform: translateY(0);}
    }
    @media (width <= 1480px) {
        & .header-wrap {padding: 0 24px;}
    }
    @media (width <= 1024px) {
        & .header-wrap {
            & .logo {
                & a {max-width: 80px;}
            }
            & .gnb {display: none;}
            & .hm {display: block;}
        }
    }
}

/* 푸터 레이아웃 - footer */
footer {padding: calc(var(--main-gap) - 40px) 0; border-top: 1px solid #eee;
    & .f-info {display: flex; justify-content: center; align-items: flex-end; gap: 12px;
        & a {display: block; max-width: 100px;}
        & p {font-size: 15px; line-height: 1; font-weight: 600;
            & strong {font-weight: 600; color: var(--key-blue);}
        }
    }
    & .f-copy {text-align: center; padding: 36px 0 0;
        & p {display: block; font-size: 14px; margin: 0 0 4px;}
        & span {display: block; font-size: 14px; color: var(--basic-gray); padding: 24px 0 0;}
    }
}