/*
TABLE OF CONTENTS | 목차
1) Layout Tokens | 레이아웃 전역 토큰
2) Global Base | 전역 기본 스타일
3) Lenis Base | Lenis 스크롤 기반 설정
4) Header | 사이트 헤더 레이아웃
5) Main Shell | 메인 래퍼 구조
6) Footer | 사이트 푸터 레이아웃
7) Reduced Motion | 모션 최소화 대응
MAINTENANCE NOTES | 유지보수 메모
- header 높이 관련 수치 수정 시 js/layout.js의 readMainPaddingTop 로직도 같이 점검
- 공통 래퍼(.container/.wrapper) 폭 변경은 main.css/sub.css의 내부 배치와 동시 검증
*/

/* 1) Layout Tokens | 레이아웃 전역 토큰 */
/* 역할: 레이아웃 전역에서 재사용하는 기본 변수 모음 */
:root {
    --header-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    --header-transition: 0.3s ease;
}

/* 2) Global Base | 전역 기본 스타일 */
/* 의존: 모든 페이지의 기본 배경/폰트/본문 텍스트 렌더링에 공통 적용 */
html,
body {
    background: var(--color-bg);
    min-height: 100%;
}

html {
    font-size: 0.938vw;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--color-text);
    font-family: "Pretendard", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
        Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    width: 100%;
}

/* 3) Lenis Base | Lenis 스크롤 기반 설정 */
/* 의존: js/layout.js Lenis 초기화 시 html/body 클래스 토글과 연동 */
html.lenis,
html.lenis body {
    height: auto;
}

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

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

body.is-nav-open {
    overflow: hidden;
    touch-action: none;
}

/* 4) Header | 사이트 헤더 레이아웃 */
/* 유지보수: .header.is-open / .header.is-hidden 클래스는 JS 제어 상태값이므로 이름 변경 주의 */
.header,
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 2.083%;
    overflow: hidden;
    background-color: var(--color-surface);
    box-shadow: var(--header-shadow);
    color: inherit;
    font-family: "GmarketSans";
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.07em;
    opacity: 1;
    transform: translateY(0);
    will-change: transform, opacity;
    transition: padding-bottom 0.5s ease, transform var(--header-transition), opacity var(--header-transition);
}

.header.is-open {
    padding-bottom: 7.389em;
}

.header.is-hidden {
    transform: translateY(calc(var(--header-base-h, 0px) * -1));
    opacity: 0;
    pointer-events: none;
}

.header-logo {
    width: 16.778em;
    margin-top: 0.306em;
}

.header-logo img {
    width: 100%;
}

.gnb-toggle {
    display: none;
}

.gnb-list {
    display: flex;
    align-items: center;
    gap: 3.556em;
    flex-flow: row wrap;
    line-height: 5.556;
    text-align: center;
    transform: translateY(0.333em);
}

.gnb-item {
    position: relative;
}

.gnb-item > a {
    transition: color 0.2s;
}

.gnb-item > a:hover,
.gnb-item > a:focus-visible,
.gnb-item.is-open > a {
    color: var(--color-accent);
}

.gnb-submenu {
    position: absolute;
    top: calc(100% - 0.333em);
    left: 0;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.3s;
}

.gnb-subitem {
    margin-bottom: 1.5em;
    overflow: hidden;
    color: #6f6f6f;
    font-size: 0.889em;
    font-weight: 500;
    line-height: 1.2;
}

.gnb-subitem > a {
    display: block;
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    transition-property: opacity, transform, color;
    transition-duration: 0.3s, 0.3s, 0.2s;
    transition-timing-function: ease, ease, linear;
    transition-delay: 0.1s, 0.1s, 0s;
}

.gnb-subitem > a:hover,
.gnb-subitem > a:focus-visible {
    color: #fff;
}

.gnb-item.is-open .gnb-submenu {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.site-nav {
    margin-left: auto;
}

.gnb-decor {
    display: none;
}

.header.is-open .gnb-item.is-open .gnb-subitem > a {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.header.is-open .gnb-item.is-open .gnb-subitem:nth-of-type(2) > a {
    transition-delay: 0.15s, 0.15s, 0s;
}

.header.is-open .gnb-item.is-open .gnb-subitem:nth-of-type(3) > a {
    transition-delay: 0.2s, 0.2s, 0s;
}

/* 5) Main Shell | 메인 래퍼 구조 */
/* 역할: 페이지별 컨텐츠가 올라가는 공통 폭/여백 기준 제공 */
main,
main.page {
    /* footer sticky를 위해 body flex 문맥에서 본문이 남는 높이를 차지합니다. */
    flex: 1 0 auto;
    padding-top: 5.556em;
}

.container,
.l-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.wrapper,
.l-wrapper {
    position: relative;
    z-index: 2;
    width: 62.5%;
    margin: 0 auto;
}

/* 6) Footer | 사이트 푸터 레이아웃 */
/* 의존: 모든 html의 공통 footer 마크업 구조와 1:1 매칭 */
.footer,
.site-footer {
    position: relative;
    z-index: 2;
    padding: 2em 2.292% 2.5em;
    background: #000;
    font-size: 0.889rem;
}

.footer-top {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
}

.footer-top::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin: 2.5em 0 1.5em;
    background: var(--color-border-muted);
}

.footer-logo {
    width: 16.938em;
}

.footer-link {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 3em;
}

.footer-bottom > div {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.footer-bottom ul {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 1em;
    font-size: 1.125em;
    font-weight: 500;
}

.footer-bottom p {
    margin-top: 1em;
    color: #676767;
    font-size: 0.875em;
    font-weight: 500;
}

/* 7) Reduced Motion | 모션 최소화 대응 */
/* 유지보수: 접근성 이슈 발생 시 transition/animation 비활성화 우선 확인 */
@media (prefers-reduced-motion: reduce) {
    .header,
    .gnb-submenu,
    .gnb-item > a,
    .gnb-subitem > a {
        transition: none;
    }
}

/* 반응형 */
@media all and (max-width: 1439px) {
    html {
        font-size: 14px;
    }

    .wrapper,
    .l-wrapper {
        width: 78.125%;
    }
}

@media all and (max-width: 1023px) {
    html {
        font-size: 18px;
    }

    .header,
    .site-header {
        align-items: center;
        padding: 1rem 1.667rem 1.556rem;
        overflow: visible;
    }

    .header.is-open {
        padding-bottom: 1.556rem;
    }

    .header-logo {
        z-index: 2;
        width: 17.056em;
        margin-top: 0;
    }

    .gnb-toggle {
        position: absolute;
        top: 50%;
        right: 1.667rem;
        z-index: 2;
        display: block;
        width: 2.222rem;
        height: 0.722rem;
        transform: translateY(-50%);
        margin-left: auto;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        letter-spacing: inherit;
        cursor: pointer;
    }

    .gnb-toggle__icon {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    .gnb-toggle__icon::before,
    .gnb-toggle__icon::after {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        transition: transform 0.2s ease;
    }

    .gnb-toggle__icon::before {
        background: linear-gradient(to top, #fff 0 100%) top / 100% 2px no-repeat;
    }

    .gnb-toggle__icon::after {
        background: linear-gradient(to bottom, #000 0 66.666%, #fff 66.666% 100%) bottom / 100% 6px no-repeat;
    }

    .header.is-open .gnb-toggle__icon::before {
        transform: translateY(4px) rotate(30deg);
    }

    .header.is-open .gnb-toggle__icon::after {
        transform: translateY(-4px) rotate(-30deg);
    }

    .site-nav {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100vw;
        height: 100vh;
        padding: 20.8vw 0 0 0;
        margin-left: 0;
        overflow-y: auto;
        background: #000;
        opacity: 0;
        visibility: hidden;
        transform: translate3d(100%, 0, 0);
        transition: transform 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s;
    }

    .header.is-open .site-nav {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
        transition-delay: 0s;
    }

    .gnb-list {
        position: relative;
        z-index: 2;
        width: 100%;
        align-items: stretch;
        gap: 0;
        flex-direction: column;
        line-height: 1.2;
        text-align: left;
        transform: none;
    }

    .gnb-item > a {
        display: block;
        padding: 0.7em 0.74em;
        font-size: 2.778rem;
    }

    .gnb-submenu {
        position: static;
        display: flex;
        flex-flow: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        height: 0;
        overflow: hidden;
        visibility: visible;
        pointer-events: auto;
        opacity: 0;
        transform: translate3d(0, -0.375rem, 0);
        transition: height 0.32s ease, opacity 0.32s ease, transform 0.32s ease;
    }

    .gnb-item.is-open .gnb-submenu {
        height: 13.333em;
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .gnb-subitem {
        font-size: 1.667em;
        margin: 0.5em 1.167em 0.5em;
    }

    .gnb-subitem:first-child {
        padding-top: 1em;
    }

    .gnb-subitem:last-child {
        padding-bottom: 1em;
    }

    .gnb-subitem > a,
    .header.is-open .gnb-item.is-open .gnb-subitem > a {
        opacity: 1;
        transform: none;
        color: rgba(255, 255, 255, 0.72);
        transition: color 0.2s ease;
    }

    .gnb-subitem > a:hover,
    .gnb-subitem > a:focus-visible,
    .gnb-subitem > a:active,
    .header.is-open .gnb-item.is-open .gnb-subitem > a:hover,
    .header.is-open .gnb-item.is-open .gnb-subitem > a:focus-visible,
    .header.is-open .gnb-item.is-open .gnb-subitem > a:active {
        color: #fff;
    }

    .gnb-decor {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
    }

    .gnb-decor-e {
        position: absolute;
        top: 7.444em;
        left: -5.944em;
        width: 19.944em;
    }

    .gnb-decor-p {
        position: absolute;
        bottom: 0;
        right: -2.5em;
        width: 19em;
    }

    .header.is-open .gnb-item.is-open .gnb-subitem:nth-of-type(2) > a,
    .header.is-open .gnb-item.is-open .gnb-subitem:nth-of-type(3) > a {
        transition-delay: 0s;
    }

    .wrapper,
    .l-wrapper {
        width: 92.286%;
    }

    main,
    main.page {
        padding-top: 5.556em;
    }

    .footer,
    .site-footer {
        padding: 2em 4.143% 2em 3.571%;
    }

    .footer-top {
        display: block;
    }

    .footer-top::after {
        display: none;
    }

    .footer-link {
        position: absolute;
        top: 13.063em;
        left: 1.813em;
    }

    .footer-bottom > div {
        display: block;
    }

    .footer address {
        padding-bottom: 8.063em;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        margin-top: 2.5em;
    }

    .footer address .t_br {
        display: block;
        font-size: 0;
        line-height: 0;
        color: transparent;
    }

    .footer-bottom ul {
        justify-content: flex-end;
        font-size: 1rem;
        margin-top: 1.722em;
    }

    .footer-bottom p {
        text-align: right;
        margin-top: 0.714em;
    }
}

@media all and (max-width: 767px) {
    html {
        font-size: 14px;
    }

    .footer-link {
        top: 14.063em;
    }

    .footer address {
        padding-bottom: 9.063em;
    }

    .footer address .m_br {
        display: block;
        font-size: 0;
        line-height: 0;
        color: transparent;
    }
}