@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Manrope&display=swap');

:root {
    --ghv-gray: #e3eaff;
    --ghv-black: #050908;
    --ghv-white: #ffffff;
}

/* 컨테이너(hero) */
.ghv-hero {
    --ghv-radius: 0rem;
    --ghv-pad: 2rem;
    position: relative;
    isolation: isolate;
    contain: paint;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--ghv-pad) 3rem 3rem;
    background-color: var(--ghv-bg, var(--ghv-gray));
    height: 80vh;
    width: 100%;
    border-radius: var(--ghv-radius);
    /* 컨테이너 밖으로 이탈 허용(Open) 시 시각적으로 보이도록 */
    overflow: visible;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    color: var(--ghv-black);
    border-radius: 50px;
}

/* Three.js 캔버스 영역 */
.ghv-hero .ghv-canvas {
    position: absolute;
    inset: 0;
    /* 레이아웃/페인트/사이즈 격리로 리플로우 영향 최소화 */
    contain: layout paint size;
    /* 스크롤/리사이즈 시 합성 경로 유지 */
    will-change: transform, opacity;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: transparent;
}

/* 첫 페인트 가림용 SSR 마스크 (섹션 내부 전용) */
.ghv-hero .ghv-canvas .ghv-mask {
    /* 인라인 스타일이 우선 적용됨. CSS는 이후 상태 전환만 담당 */
    opacity: 1;
    transition: opacity .18s ease;
}

.ghv-hero.ghv-ready .ghv-canvas .ghv-mask {
    opacity: 0;
    visibility: hidden;
}

/* 로더 */
.ghv-hero .ghv-loader {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8rem;
    height: 8rem;
}

.ghv-hero .ghv-loader div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 8rem;
    height: 8rem;
    margin: .25rem;
    border: .25rem solid var(--ghv-black);
    border-radius: 50%;
    animation: ghv-loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--ghv-black) transparent transparent transparent;
}

.ghv-hero .ghv-loader div:nth-child(1) {
    animation-delay: -0.45s;
}

.ghv-hero .ghv-loader div:nth-child(2) {
    animation-delay: -0.3s;
}

.ghv-hero .ghv-loader div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes ghv-loading {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 커스텀 커서 */
.ghv-hero .ghv-cursor {
    pointer-events: none;
}

.ghv-hero .ghv-big-circle,
.ghv-hero .ghv-small-circle {
    position: fixed;
    z-index: 1000;
    border-radius: 50%;
}

.ghv-hero .ghv-big-circle {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--ghv-black);
    top: -1rem;
    left: -1rem;
}

.ghv-hero .ghv-small-circle {
    width: .3rem;
    height: .3rem;
    background-color: var(--ghv-black);
    top: -0.15rem;
    left: -0.15rem;
}

/* 헤더 */
.ghv-hero .ghv-header {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    opacity: 0;
    /* 애니메이션으로 1 */
}

/* .ghv-hero .ghv-logo {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-family: 'DM Sans', sans-serif;
    margin-right: auto;
} */

.ghv-hero .ghv-logo svg {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: .5rem;
}

.ghv-hero .ghv-logo .ghv-copyright {
    font-size: .75rem;
    align-self: start;
}

.ghv-hero .ghv-nav {
    justify-self: center;
}

.ghv-hero .ghv-nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ghv-hero .ghv-nav a {
    text-decoration: none;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--ghv-black);
}

/* 코너 텍스트 */
.ghv-hero .ghv-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* 3D 인터랙션 방해 X */
    z-index: 10;
}

.ghv-hero .ghv-corner {
    position: absolute;
    line-height: 1.2;
    /* 개별 폰트/크기/색은 inline style로 설정 */
}

.ghv-hero .ghv-corner.ghv-tl {
    top: var(--ghv-pad);
    left: var(--ghv-pad);
}

.ghv-hero .ghv-corner.ghv-tr {
    top: var(--ghv-pad);
    right: var(--ghv-pad);
    text-align: right;
}

.ghv-hero .ghv-corner.ghv-bl {
    bottom: var(--ghv-pad);
    left: var(--ghv-pad);
}

.ghv-hero .ghv-corner.ghv-br {
    bottom: var(--ghv-pad);
    right: var(--ghv-pad);
    text-align: right;
}

/* 콘텐츠 */
.ghv-hero .ghv-content {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    pointer-events: none;
}

.ghv-hero .ghv-title {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(24px, 3.5vw, 56px);
    line-height: 1;
    font-weight: 400;
    border-radius: 2rem;
}

.ghv-hero .ghv-title .line {
    display: block;
    overflow: hidden;
}

.ghv-hero .ghv-title .line .word {
    display: inline-block;
    transform: translateY(100%);
}

.ghv-hero .ghv-text {
    max-width: 24rem;
    margin-left: 4rem;
    opacity: 0;
}

.ghv-hero .ghv-text p {
    font-size: 1rem;
    line-height: 1.5;
}

/* PC/모바일 전용 표시 토글 */
.ghv-hero .ghv-mobile-only {
    display: none;
}

.ghv-hero.ghv-mobile-mode .ghv-pc-only {
    display: none !important;
}

.ghv-hero.ghv-mobile-mode .ghv-mobile-only {
    display: block !important;
}

/* 전환 시 */
.ghv-hero.ghv-switching .ghv-model {
    transition: opacity .3s ease;
}

.ghv-hero .ghv-canvas canvas {
    background: transparent !important;
    transform: translateZ(0);
    /* 합성 레이어 강제 승격(옵션) */
}

/* 히어로가 전혀 없는 페이지에서 플러그인 오버레이/마스크 완전 차단 */
html:not(.ghv-has-hero) #ghv-global-cover,
html:not(.ghv-has-hero) .ghv-global-cover,
html:not(.ghv-has-hero) .ghv-hard-blocker,
html:not(.ghv-has-hero) .ghv-mask,
html:not(.ghv-has-hero) .ghv-loader {
    display: none !important;
}

html:not(.ghv-has-hero)[data-ghv-noload]::before,
html:not(.ghv-has-hero)[data-ghv-noload]::after {
    content: none !important;
    display: none !important;
}

/* 과거 버전의 전역 커버 가상요소를 무조건 무력화 (초기 페인트부터 흰 화면 방지) */
html[data-ghv-noload]::before,
html[data-ghv-noload]::after {
    content: none !important;
    display: none !important;
}

/* ================= EnigmaGrid Background (canvas only) ================ */
/* 히어로 컨테이너에 캔버스를 깔고 Three.js 캔버스/콘텐츠는 위에 오도록 레이어링 */
.ghv-hero {
    position: relative;
    overflow: hidden;
    background: #121212;
    /* 기본 배경색 유지 */
    --ghv-bg-color: #0963e1;
    /* 배경 라인 컬러(원하는 색으로 인스턴스별 override 가능) */
}

.ghv-bg-canvas {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 0;
    pointer-events: none;
    /* 상호작용은 위 레이어(Three.js)에만 */
}

/* (선택) Three.js 스테이지가 별도 래퍼/캔버스면 위로 띄우기 */
.ghv-hero .ghv-stage,
.ghv-hero .ghv-three,
.ghv-hero .three-stage,
.ghv-hero canvas.ghv-three {
    position: relative;
    z-index: 1;
}

/* 모바일 대체 GIF */
.ghv-hero .ghv-mobile-fallback {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
    /* 기본: 포함 */
    pointer-events: none;
    background: transparent;
    z-index: 0;
}

.ghv-hero .ghv-mobile-fallback.fit-cover {
    object-fit: cover;
}

/* 채우기 */
.ghv-hero .ghv-mobile-fallback.fit-contain {
    object-fit: contain;
}

/* 포함 */

/* ── 모바일 상/하 스택 텍스트 2+2 */
.ghv-hero .ghv-mstack {
    position: absolute;
    /* flex 아이템로서 0폭 수축 방지: 섹션 전체를 덮는 레이어 */
    inset: 0;
    /* 섹션 전체 */
    z-index: 30;
    /* 텍스트를 GIF 위로 */
    pointer-events: none;
    box-sizing: border-box;
    writing-mode: horizontal-tb !important;
    /* 전역 세로쓰기 방지 */
}

.ghv-hero .ghv-mstack-top,
.ghv-hero .ghv-mstack-bottom {
    position: absolute;
    /* 폭은 좌/우 여백으로 만들자: calc 곱셈 호환성 이슈 제거 */
    left: var(--ghv-pad);
    right: var(--ghv-pad);
    width: auto;
    transform: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: stretch;
    /* center → stretch */
}

.ghv-hero .ghv-mstack-top {
    top: var(--ghv-pad);
}

.ghv-hero .ghv-mstack-bottom {
    bottom: var(--ghv-pad);
}

.ghv-hero .ghv-mstack-item {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    text-align: center;
    /* 줄바꿈 규칙(테마 전역 break-all 무력화) */
    writing-mode: horizontal-tb !important;
    white-space: pre-wrap;
    /* \n 유지 + 자동 줄바꿈 */
    word-break: keep-all !important;
    /* 한글 단일자 깨짐 방지 */
    overflow-wrap: anywhere;
    /* 긴 영문/URL 대응 */
}

.ghv-hero .ghv-content {
    position: relative;
    z-index: 20;
}

.ghv-hero .ghv-corners {
    z-index: 30;
}

.ghv-hero .ghv-mstack {
    z-index: 30;
}

/* ★ 제목 라인 기본 내려간 상태 해제(ready/mobile일 때 보이게) */
.ghv-hero.ghv-ready .ghv-title .line .word,
.ghv-hero.ghv-mobile-mode .ghv-title .line .word {
    transform: none;
}

.ghv-hero .ghv-canvas,
.ghv-hero .ghv-mobile-fallback {
    z-index: 0 !important;
}

.ghv-hero .ghv-mstack-top,
.ghv-hero .ghv-mstack-bottom {
    position: absolute;
    left: var(--ghv-pad);
    right: var(--ghv-pad);
    width: auto;
    /* calc(...) 대신 좌우 여백으로 폭 확보 */
    transform: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: stretch;
    /* 각 아이템을 가로로 늘림 */
    box-sizing: border-box;
    writing-mode: horizontal-tb !important;
}

/* 3) 각 스택 아이템: 줄바꿈/폭/세로쓰기 강제 */
.ghv-hero .ghv-mstack-item {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* flex 내부 폭 수축 방지 보조 */
    text-align: center;
    writing-mode: horizontal-tb !important;
    white-space: pre-wrap !important;
    /* \n 유지 + 자동 줄바꿈 (inline 스타일 무력화) */
    word-break: keep-all !important;
    /* 한글 단일자 깨짐 방지 */
    overflow-wrap: anywhere;
    /* 긴 영문/URL 대응 */
}

.ghv-hero.ghv-mobile-mode .ghv-mobile-only {
    display: block !important;
}

/* 5) 제목 애니 안 쓰면 기본 내린 상태 해제 */
.ghv-hero.ghv-ready .ghv-title .line .word,
.ghv-hero.ghv-mobile-mode .ghv-title .line .word {
    transform: none;
}