@charset "UTF-8";

/* seo h1 숨김처리 */
.metaH1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Fullpage (lenis snap 기반)
   - lenis가 window 스크롤을 부드럽게 처리
   - common.js 가 wheel 이벤트를 가로채 lenis.scrollTo() 로 한 섹션씩
   ========================================================================== */
.fullpage_wrap > .fp_section,
.fullpage_wrap > section {
    min-height: 100vh;
    min-height: 100lvh;
}

/* 모바일에서는 풀페이지 스냅 해제  */
@media screen and (max-width: 768px) {
    .fullpage_wrap > .fp_section,
    .fullpage_wrap > section {
        min-height: auto;
    }
}

/* ==========================================================================
   Global Header
   ========================================================================== */
.global_header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}
.global_header.is-hidden,
.global_header.is-intro-hidden {
    transform: translateY(-100%);
}
.global_header .gh_inner {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--header-height);
    padding: 0px 40px;
    transition: height 0.3s ease;
}
.global_header .gh_logo svg {
    width: clamp(84px, 6.7708vw, 130px);
    height: clamp(16px, 1.25vw, 24px);
    transition:
        width 0.3s ease,
        height 0.3s ease;
}
.global_header .gh_logo,
.global_header .gh_right {
    flex: 1 1 0;
    min-width: 0;
}
.global_header .gh_right {
    display: flex;
    justify-content: flex-end;
}
.global_header .gh_nav {
    flex: 0 0 auto;
}

/* Logo */
.global_header .gh_logo {
    margin: 0;
}
.global_header .gh_logo a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-bg-soft);
    font-family: var(--font-pretendard);
    font-weight: var(--fw-semibold);
    font-size: var(--font-22);
    letter-spacing: 0.32px;
}

/* ----- Nav list  ----------------------------------- */
.global_header .gh_nav_list {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: clamp(6px, 0.4167vw, 8px);
    background: var(--color-gray-900);
    border-radius: 9999px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* 활성 상태 슬라이딩 인디케이터 */
.global_header .gh_nav_indicator {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 0;
    background: var(--color-gray-800);
    box-shadow: inset -1px -2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 9999px;
    pointer-events: none;
    transform: translateX(0);
    transition:
        transform 0.45s cubic-bezier(0.65, 0, 0.35, 1),
        width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 0;
}
.global_header .gh_nav_item {
    display: flex;
    position: relative;
    z-index: 1;
}
/* 메뉴 아이템: 링크 */
.global_header .gh_nav_item > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 0.7292vw, 14px) 28px;
    border-radius: 9999px;
    overflow: hidden;
    color: var(--color-bg-soft);
    font-family: var(--font-pretendard);
    font-weight: var(--fw-light);
    font-size: var(--font-16);
    line-height: 1.4;
    letter-spacing: 0.32px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    transition: background-color 0.25s ease;
}
/* hover/focus: 활성 상태보다 약하게 */
.global_header .gh_nav_item:not(.is-active) > a:focus-visible {
    background: rgba(38, 38, 38, 0.6);
}

/* ----- Language switcher ----------------------------------------------------
   PC(>768px)     : .gh_lang     — EN | KO | ZH 인라인 (Figma 926:308)
   Mobile(≤768px) : .gh_lang_acc — 현재 언어 버튼 클릭 시 아래로 나머지 언어 펼침 (js/common.js)
   -------------------------------------------------------------------------- */
.global_header .gh_lang {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: clamp(6px, 0.4167vw, 8px);
    background: var(--color-gray-900);
    border-radius: 9999px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}
.global_header .gh_lang_item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(7px, 0.5208vw, 10px) 20px;
    border-radius: 9999px;
    color: var(--color-bg-soft);
    font-family: var(--font-pretendard);
    font-weight: var(--fw-light);
    font-size: var(--font-16);
    line-height: 1.4;
    letter-spacing: 0.32px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    transition: background-color 0.25s ease;
}
/* hover/focus: 활성 상태보다 약하게 (GNB 와 동일) */
.global_header .gh_lang_item:not(.is-active):hover,
.global_header .gh_lang_item:not(.is-active):focus-visible {
    background: rgba(38, 38, 38, 0.6);
}
.global_header .gh_lang_item.is-active {
    background: var(--color-gray-800);
    pointer-events: none;
}

/* Mobile 아코디언 — .gh_lang_acc 는 접힌 크기만 레이아웃을 차지하고 .gh_lang_acc_panel 이
   아래로 늘어나며 overflow (헤더 높이·세로 정렬 불변). 열림 상태 .is-open */
.global_header .gh_lang_acc {
    --gh-lang-pad: 3px;
    --gh-lang-py: 5px;
    --gh-lang-px: 10px;
    --gh-lang-fs: 1.2rem;
    --gh-lang-row: calc(var(--gh-lang-fs) * 1.4 + var(--gh-lang-py) * 2);
    display: none;
    position: relative;
    height: calc(var(--gh-lang-row) + var(--gh-lang-pad) * 2);
}
.global_header .gh_lang_acc_panel {
    display: flex;
    flex-direction: column;
    padding: var(--gh-lang-pad);
    background: var(--color-gray-900);
    /* 접힌 높이의 절반 — 접힘: 알약형 / 펼침: 같은 곡률의 라운드 박스 (전환 중 모서리 튐 없음) */
    border-radius: calc(var(--gh-lang-row) / 2 + var(--gh-lang-pad));
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}
.global_header .gh_lang_acc_toggle,
.global_header .gh_lang_acc_item {
    display: flex;
    align-items: center;
    padding: var(--gh-lang-py) var(--gh-lang-px);
    border: 0;
    border-radius: 9999px;
    color: var(--color-bg-soft);
    font-family: var(--font-pretendard);
    font-weight: var(--fw-light);
    font-size: var(--gh-lang-fs);
    line-height: 1.4;
    letter-spacing: 0.32px;
    text-decoration: none;
    white-space: nowrap;
}
/* 현재 언어 — 활성 배경 */
.global_header .gh_lang_acc_toggle {
    gap: 5px;
    padding-right: calc(var(--gh-lang-px) - 4px);
    background: var(--color-gray-800);
    cursor: pointer;
}
/* reset.css 의 span 폰트 강제 해제 */
.global_header .gh_lang_acc_toggle > span {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}
.global_header .gh_lang_acc_arrow {
    width: 5px;
    height: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.global_header .gh_lang_acc.is-open .gh_lang_acc_arrow {
    transform: translateY(1px) rotate(-135deg);
}
/* 펼침 영역 — grid 0fr→1fr 로 높이 애니메이션 */
.global_header .gh_lang_acc_list_wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.global_header .gh_lang_acc.is-open .gh_lang_acc_list_wrap {
    grid-template-rows: 1fr;
}
.global_header .gh_lang_acc_list {
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    /* 닫힘: 포커스 불가 (펼침 애니메이션이 끝난 뒤 숨김) */
    visibility: hidden;
    transition: visibility 0s linear 0.35s;
}
.global_header .gh_lang_acc.is-open .gh_lang_acc_list {
    visibility: visible;
    transition-delay: 0s;
}
.global_header .gh_lang_acc_list > li:first-child {
    margin-top: 2px;
}
.global_header .gh_lang_acc_item {
    opacity: 0;
    transform: translateY(-6px);
    transition:
        background-color 0.25s ease,
        opacity 0.25s ease,
        transform 0.3s ease;
}
.global_header .gh_lang_acc.is-open .gh_lang_acc_item {
    opacity: 1;
    transform: none;
    transition-delay: 0s, 0.1s, 0.1s;
}
.global_header .gh_lang_acc_item:focus-visible {
    background: rgba(38, 38, 38, 0.6);
}

.global_header .gh_burger {
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.global_header .gh_burger span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px auto;
    background: var(--color-bg-soft);
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

/* Tablet/Mobile */
@media screen and (max-width: 1024px) {
    .global_header .gh_inner {
        padding: 0 24px;
    }
    .global_header .gh_nav_item a {
        padding: 10px 18px;
        font-size: var(--font-14);
    }

    .global_header .gh_nav {
        display: none;
    }

    .global_header .gh_logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        flex: 0 0 auto;
    }
}

@media screen and (max-width: 768px) {
    .global_header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(0, 0, 0, 0.7);
    }
    /* 언어 전환: 인라인 → 아코디언 */
    .global_header .gh_lang {
        display: none;
    }
    .global_header .gh_lang_acc {
        display: block;
    }
}

/* ==========================================================================
   i18n — 영문 페이지 타이포 보정
   한국어 카피 기준의 음수 letter-spacing 은 라틴 문자에서 과하게 붙어 보이므로 완화.
   ========================================================================== */
html[lang="en"] .hero_desc,
html[lang="en"] .vault_desc,
html[lang="en"] .vault_caption_desc,
html[lang="en"] .global_footer .gf_desc,
html[lang="en"] .pano_hint_text,
html[lang="en"] .evault_hint,
html[lang="zh-Hans"] .hero_desc,
html[lang="zh-Hans"] .vault_desc,
html[lang="zh-Hans"] .vault_caption_desc,
html[lang="zh-Hans"] .global_footer .gf_desc,
html[lang="zh-Hans"] .pano_hint_text,
html[lang="zh-Hans"] .evault_hint {
    letter-spacing: 0;
}
/* 중문(간체): 본문 토큰을 Noto Sans SC 우선으로 교체.
   reset.css 가 요소마다 var(--font-pretendard) 를 강제하므로 토큰 자체를 바꿔야 전체에 적용된다.
   Marcellus(영문 타이틀)는 그대로 유지. */
html[lang="zh-Hans"] {
    --font-pretendard: "Noto Sans SC", "Pretendard", "Noto Sans KR", sans-serif;
}
html[lang="zh-Hans"] .vault_caption_desc,
html[lang="zh-Hans"] .philosophy_desc p {
    word-break: normal;
    overflow-wrap: anywhere;
}
html[lang="en"] .vault_caption_desc,
html[lang="en"] .philosophy_desc p {
    word-break: normal;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Global Footer
   ========================================================================== */
.global_footer {
    position: relative;
    overflow: hidden;
    color: var(--color-bg-soft);
    background: var(--color-gray-900);
    isolation: isolate;
}
.global_footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/footer_bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
}

.global_footer .gf_inner {
    position: relative;
    padding: clamp(60px, 4.1667vw, 48px) clamp(16px, 2.8646vw, 55px) 20px;
    margin: 0 auto;
}

/* 상단: intro + form (flex row) */
.global_footer .gf_main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(50px, 5vw, 120px);
    max-width: var(--container-max);
}

/* Intro (left) */
.global_footer .gf_intro {
    flex: 1 1 0;
    min-width: 0;
}
.global_footer .gf_title {
    font-family: var(--font-marcellus);
    font-weight: var(--fw-regular);
    font-size: clamp(4.4rem, 6.25vw, 12rem);
    line-height: 1.45;
    letter-spacing: -0.6px;
    color: var(--color-bg-soft);
}
.global_footer .gf_desc {
    margin: 0;
    font-family: var(--font-pretendard);
    font-weight: var(--fw-regular);
    font-size: var(--font-22);
    line-height: 1.6;
    letter-spacing: -0.88px;
    color: var(--color-bg-soft);
}

/* Form (right) */
.global_footer .gf_form {
    padding-top: clamp(40px, 4.5313vw, 87px);
    padding-right: clamp(24px, 2.6042vw, 50px);
    flex: 0 0 clamp(420px, 30vw, 578px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 578px;
}
.global_footer .gf_field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.global_footer .gf_label {
    display: block;
    font-family: var(--font-marcellus);
    font-weight: var(--fw-regular);
    font-size: var(--font-18);
    line-height: 1.45;
    letter-spacing: -0.09px;
    color: var(--color-bg-soft);
}
.global_footer .gf_input {
    width: 100%;
    height: 60px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0;
    color: var(--color-bg-soft);
    font-family: var(--font-pretendard);
    font-weight: var(--fw-regular);
    font-size: var(--font-16);
    line-height: 1.6;
    letter-spacing: -0.64px;
    outline: none;
    border-bottom: 1px solid transparent;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}
.global_footer .gf_input::placeholder {
    color: var(--color-bg-soft);
    opacity: 0.5;
}
.global_footer .gf_input:focus {
    border-bottom: 1px solid var(--color-brand-white);
    background: rgba(255, 255, 255, 0.18);
}
.global_footer .gf_textarea {
    height: 120px;
    padding: 17px 12px;
    resize: none;
    line-height: 1.6;
}

/* 유효성 검사 invalid — input border 빨간색 */
.global_footer .gf_field.is-invalid .gf_input,
.global_footer .gf_field.is-invalid .gf_input:focus {
    border-bottom: 1px solid #ff6b6b;
}

/* Submit */
.global_footer .gf_submit {
    width: 100%;
    height: 68px;
    margin-top: 0;
    background: var(--color-bg-soft);
    color: var(--color-gray-800);
    font-family: var(--font-marcellus);
    font-weight: var(--fw-regular);
    font-size: var(--font-24);
    line-height: 1.45;
    letter-spacing: -0.12px;
    text-align: center;
    border: 0;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        transform 0.15s ease;
}
.global_footer .gf_submit:hover {
    background: var(--color-brand-white);
}
.global_footer .gf_submit:active {
    transform: translateY(1px);
}

/* Copy */
.global_footer .gf_copy {
    margin: clamp(28px, 4.5313vw, 87px) 0 0;
    text-align: center;
    font-family: var(--font-marcellus);
    font-weight: var(--fw-regular);
    font-size: var(--font-16);
    line-height: 1.45;
    letter-spacing: -0.08px;
    color: var(--color-bg-soft);
    opacity: 0.85;
}

/* Tablet/Mobile */
@media screen and (max-width: 1024px) {
    .global_footer .gf_main {
        flex-direction: column;
        align-items: stretch;
    }
    .global_footer .gf_form {
        flex: 0 0 auto;
        max-width: 100%;
        padding: 0;
        justify-self: stretch;
    }
}
@media screen and (max-width: 768px) {
    .global_footer .gf_title {
        margin-bottom: 40px;
        line-height: 1;
        letter-spacing: -0.22px;
    }
    .global_footer .gf_input {
        height: 50px;
        font-size: 1.5rem;
    }
    .global_footer .gf_textarea {
        height: 100px;
        padding: 14px 12px;
    }
    .global_footer .gf_submit {
        height: 58px;
        letter-spacing: -0.09px;
    }
    .global_footer .gf_form {
        gap: 12px;
    }
    .global_footer .gf_desc {
        letter-spacing: -0.64px;
    }
    .global_footer .gf_label {
        letter-spacing: -0.075px;
    }
}

/* ==========================================================================
   Footer Contact — 개인정보 동의 · 전송 상태
   ========================================================================== */
.global_footer .gf_consent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 16px;
}
.global_footer .gf_check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.global_footer .gf_check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.global_footer .gf_check_mark {
    flex: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-brand-sand, #a69a84);
    background: transparent;
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.global_footer .gf_check_mark::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--color-brand-white, #fdfcf9);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
}
.global_footer .gf_check input:checked + .gf_check_mark {
    background: var(--color-brand-sand, #a69a84);
    border-color: var(--color-brand-sand, #a69a84);
}
.global_footer .gf_check input:checked + .gf_check_mark::after {
    transform: rotate(45deg) scale(1);
}
.global_footer .gf_check input:focus-visible + .gf_check_mark {
    outline: 2px solid var(--color-brand-sand, #a69a84);
    outline-offset: 2px;
}
.global_footer .gf_check_text {
    font-size: var(--font-14, 1.4rem);
    color: var(--color-brand-white, #fdfcf9);
}
.global_footer .gf_consent_toggle {
    background: none;
    border: 0;
    padding: 0;
    font-size: var(--font-14, 1.4rem);
    color: var(--color-brand-sand, #a69a84);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.global_footer .gf_consent_detail {
    flex-basis: 100%;
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px solid rgba(166, 154, 132, 0.4);
    font-size: var(--font-14, 1.4rem);
    line-height: 1.75;
    color: var(--color-brand-sand, #a69a84);
}
.global_footer .gf_consent_detail p {
    margin: 0 0 4px;
}
.global_footer .gf_consent_detail p:last-child {
    margin-bottom: 0;
}
.global_footer .gf_consent_detail b {
    display: inline-block;
    min-width: 72px;
    color: var(--color-brand-white, #fdfcf9);
    font-weight: 500;
}
.global_footer .gf_consent.is-invalid .gf_check_mark {
    border-color: #d9534f;
}
.global_footer .gf_consent.is-invalid .gf_check_text {
    color: #d9534f;
}

.global_footer .gf_submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.global_footer .gf_status {
    margin: 12px 0 0;
    min-height: 1.6em;
    font-size: var(--font-14, 1.4rem);
    line-height: 1.6;
}
.global_footer .gf_status.is-ok {
    color: var(--color-brand-white, #fdfcf9);
}
.global_footer .gf_status.is-error {
    color: #d9534f;
}