/* ==========================================================================
   main.css - index.php(메인페이지) 전용 스타일
   브루탈리스트 에디토리얼 + AI 다크무드 컨셉
   ========================================================================== */

/* ---------- 풀페이지 스냅 (이 페이지에서만 적용, html.pg-main-page로 스코프) ----------
   한 번의 스크롤/스와이프가 아무리 세도 섹션 하나만 이동하도록 브라우저
   네이티브 스크롤 스냅을 사용한다. scroll-snap-stop:always를 각 스냅
   지점에 반드시 함께 줘야 빠른 플릭에서도 여러 지점을 건너뛰지 않는다. */
html.pg-main-page {
    scroll-snap-type: y mandatory;
}

/* ---------- 필름 그레인 (전 섹션 공통, 살짝 얹는 질감) ---------- */
.pg-grain {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 히어로 (풀블리드, 다크, 크래시 타이포) ----------
   프로세스 섹션과 같은 방식: 배경은 화면에 고정되고, 투명 스페이서
   3개(단어 하나당 하나)가 스냅 지점 역할만 한다. 스크롤해도 페이지가
   넘어가 보이지 않고 단어 텍스트만 교체된다.

   .pg-hero-stack-sticky는 height:0으로 문서 흐름에 공간을 차지하지
   않고, 실제 보이는 내용은 절대위치 자식(.pg-hero-sticky-content)이
   담당한다 - 그래야 스페이서 3개(총 300vh)가 고정 구간과 정확히
   맞아떨어진다(프로세스 섹션과 동일한 이유). */
.pg-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #0b0b0b;
}

.pg-hero-stack {
    position: relative;
}

.pg-hero-stack-sticky {
    position: sticky;
    top: 0;
    height: 0;
}

.pg-hero-sticky-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--header-height) 28px 0;
}

/* 100vh는 모바일 브라우저의 주소창을 뺀 "최대" 높이 기준이라, 주소창이
   떠 있는 실제 화면(작은 뷰포트)에서는 하단 마퀴 배너가 화면 밖으로
   밀려 잘려 보일 수 있다. 100svh(항상 보장되는 최소 뷰포트 높이)를
   지원하는 브라우저에서는 그걸로 덮어써서 항상 한 화면 안에 다 들어오게 한다. */
.pg-hero-snap-spacer {
    height: 100vh;
    height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* opacity/transform은 js/pages/main.js가 스페이서 진입 시점마다 토글 */
.pg-hero-word {
    position: absolute;
    left: 28px;
    right: 28px;
    font-weight: 900;
    font-size: clamp(40px, 13vw, 140px);
    line-height: 1.05;
    letter-spacing: -2px;
    color: #ffffff;
    text-align: center;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.pg-hero-word.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.pg-hero-word--brand {
    color: #FFB800;
}

.pg-hero-marquee {
    position: absolute;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%) rotate(-3deg);
    width: 130vw;
    overflow: hidden;
    background: #FFB800;
    padding: 10px 0;
    z-index: 2;
}

.pg-hero-marquee-track {
    display: flex;
    width: max-content;
    gap: 20px;
    white-space: nowrap;
    animation: pgHeroMarquee 16s linear infinite;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #0b0b0b;
}

@keyframes pgHeroMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- 매니페스토 (텍스트+원형 오브를 한 섹션으로, 전부 중앙 정렬) ----------
   원형은 화면 모서리로 떠다니지 않고 항상 정중앙에 고정되며, 테두리만
   feTurbulence로 흐물흐물 일렁인다. */
.pg-manifesto {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    height: 100vh;
    background: #ffffff;
    padding: 80px 28px;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.pg-manifesto.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pg-manifesto-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(880px, 130vw);
    height: min(880px, 130vw);
    z-index: 0;
}

.pg-manifesto-content {
    position: relative;
    z-index: 1;
    max-width: 640px;
}

@media (min-width: 900px) {
    .pg-manifesto {
        padding: 100px 64px;
    }
}

@media (min-width: 1400px) {
    .pg-manifesto {
        padding: 120px 120px;
    }
}

.pg-manifesto-line {
    font-size: clamp(26px, 7vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    color: #1a1a1a;
}

.pg-manifesto-line--big {
    font-size: clamp(44px, 13vw, 96px);
    font-weight: 900;
    line-height: 1.05;
    color: #FFB800;
    margin-top: 6px;
}

.pg-manifesto-sub {
    max-width: 560px;
    margin: 32px auto 0;
    font-size: 15px;
    line-height: 1.8;
    color: #8a8a8a;
}

/* ---------- 포트폴리오 필름스트립 (가로 스크롤 스냅) ----------
   세로 방향으로는 페이지 스냅의 슬라이드 하나, 가로 방향으로는
   카드 캐러셀 - 두 스냅이 서로 다른 축이라 충돌 없이 공존한다. */
.pg-filmstrip {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    background: #ffffff;
    padding: 96px 0 100px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.pg-filmstrip-head {
    padding: 0 28px;
    margin-bottom: 32px;
}

@media (min-width: 900px) {
    .pg-filmstrip-head {
        padding: 0 64px;
    }
}

@media (min-width: 1400px) {
    .pg-filmstrip-head {
        padding: 0 80px;
    }
}

.pg-filmstrip-eyebrow {
    font-size: 13px;
    font-weight: 800;
    color: #FFB800;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.pg-filmstrip-title {
    font-size: clamp(22px, 6vw, 32px);
    font-weight: 900;
    line-height: 1.3;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.pg-filmstrip-guide {
    font-size: 13px;
    font-weight: 700;
    color: #b0b0b0;
}

.pg-filmstrip-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 28px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

/* 마우스 드래그로 스와이프(js/pages/main.js) - 드래그 중엔 스냅을 잠시 끄고
   텍스트 선택도 막아 자연스럽게 밀린다 */
.pg-filmstrip-track.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
}

@media (min-width: 900px) {
    .pg-filmstrip-track {
        gap: 24px;
        padding: 0 64px 16px;
    }
}

@media (min-width: 1400px) {
    .pg-filmstrip-track {
        gap: 28px;
        padding: 0 80px 16px;
    }
}

.pg-filmstrip-track::-webkit-scrollbar {
    display: none;
}

.pg-filmstrip-item {
    position: relative;
    flex: 0 0 78vw;
    max-width: 520px;
    aspect-ratio: 4 / 5;
    border-radius: 4px;
    background: linear-gradient(160deg, #1e1e1e, #3c3c3c);
    scroll-snap-align: start;
    overflow: hidden;
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 태블릿 이상에서는 한 장이 화면을 거의 다 채우는 대신, 여러 장이
   나란히 보이도록 vw 기반 대신 고정폭으로 전환 */
@media (min-width: 900px) {
    .pg-filmstrip-item {
        flex-basis: 380px;
        max-width: 380px;
    }
}

@media (min-width: 1400px) {
    .pg-filmstrip-item {
        flex-basis: 440px;
        max-width: 440px;
    }
}

.pg-filmstrip-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pg-filmstrip-item-index {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.55);
}

.pg-filmstrip-item-name {
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: clamp(22px, 6vw, 30px);
    font-weight: 900;
    color: #ffffff;
}

/* ---------- 고스트 넘버 프로세스 (배경 고정, 내용만 스텝별로 스냅 전환) ----------
   배경(격자+동심원+거대 숫자)은 스크롤 내내 화면에 고정되고, 6개의
   "투명 스페이서"만 스냅 지점 역할을 한다. 스텝이 바뀔 때 페이지가
   넘어가는 게 아니라 콘텐츠(숫자·점·본문)만 교체된다.

   .pg-ghost-stack-sticky는 height:0으로 문서 흐름에 공간을 전혀 차지하지
   않고, 실제 보이는 내용은 그 안의 절대위치 자식(.pg-ghost-sticky-content)이
   담당한다 - 그래야 스페이서 6개(총 600vh)가 고정 구간과 정확히 맞아떨어진다
   (sticky 요소 자신의 높이가 흐름에 끼어들면 마지막 스텝 하나가 고정이
   풀린 뒤에야 나타나는 오차가 생긴다). */
.pg-ghost {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.pg-ghost-stack {
    position: relative;
}

.pg-ghost-stack-sticky {
    position: sticky;
    top: 0;
    height: 0;
}

.pg-ghost-sticky-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f7f6f3;
}

/* 중앙에서 바깥으로 계속 퍼져나가는 원형 파동 - 순수 CSS infinite
   애니메이션이라 스크롤로 스텝(01~05)이 바뀌어도 리셋되지 않고 처음
   로드된 순간부터 계속 이어진다. 화면 대각선 기준(vmax)으로 커지게 해서
   화면 끝까지 확실히 도달하게 한다. 시작 크기를 작게 잡지 않고 이미
   콘텐츠(숫자) 바깥쪽에서 시작하도록 키워서, 파동이 텍스트를 덮는
   느낌 없이 바깥에서부터 서서히 퍼져나가는 것처럼 보이게 한다.
   링 자체는 site-wide bg-orb와 같은 기법(feTurbulence + displacement
   map, index.php의 SVG)으로 테두리가 자유분방하게 흐물흐물 일렁이고,
   여기에 CSS로 확대/페이드 애니메이션을 얹는다. 링 3개를 서로 다른
   딜레이로 반복시켜 파동이 끊기지 않고 연속으로 퍼지는 것처럼 보이게 한다. */
.pg-ghost-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    pointer-events: none;
}

.pg-ghost-ripple-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 10vmax;
    height: 10vmax;
    margin: -5vmax 0 0 -5vmax;
    opacity: 0;
    will-change: transform, opacity;
    animation: pgGhostRippleExpand 9s ease-out infinite;
}

.pg-ghost-ripple-ring:nth-child(2) {
    animation-delay: 3s;
}

.pg-ghost-ripple-ring:nth-child(3) {
    animation-delay: 6s;
}

@keyframes pgGhostRippleExpand {
    0% {
        transform: scale(1.6);
        opacity: 0.22;
    }
    100% {
        transform: scale(14);
        opacity: 0;
    }
}

.pg-ghost-bg-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    z-index: 0;
    font-size: min(62vw, 520px);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(26, 26, 26, 0.1);
    pointer-events: none;
    user-select: none;
}

/* 스냅 지점 - 화면엔 아무것도 그리지 않고, 스크롤 거리(600vh = 100vh * 6)와
   IntersectionObserver(js/pages/main.js)의 기준점 역할만 한다 */
.pg-ghost-snap-spacer {
    height: 100vh;
    height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.pg-ghost-head {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 28px;
    padding: 0 24px;
}

.pg-ghost-eyebrow {
    font-size: 13px;
    font-weight: 800;
    color: #FFB800;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.pg-ghost-title {
    font-size: clamp(20px, 5vw, 26px);
    font-weight: 900;
    color: #1a1a1a;
}

.pg-ghost-dots {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 24px;
    padding: 0 24px;
}

.pg-ghost-dot {
    font-size: 12px;
    font-weight: 700;
    color: #c4c4c4;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.pg-ghost-dot.is-passed {
    color: #1a1a1a;
    border-bottom-color: rgba(26, 26, 26, 0.2);
}

.pg-ghost-dot.is-active {
    color: #FFB800;
    border-bottom-color: #FFB800;
}

.pg-ghost-detail {
    position: relative;
    z-index: 1;
    height: 300px;
    width: min(560px, 90vw);
    text-align: center;
}

@media (min-width: 900px) {
    .pg-ghost-detail {
        height: 260px;
        width: min(620px, 90vw);
    }
}

.pg-ghost-detail-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.pg-ghost-detail-panel.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.pg-ghost-panel-title {
    font-size: clamp(24px, 6vw, 32px);
    font-weight: 900;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.pg-ghost-panel-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    text-align: left;
}

.pg-ghost-panel-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-left: 14px;
    border-left: 2px solid rgba(255, 184, 0, 0.35);
}

.pg-ghost-panel-item-num {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    color: #FFB800;
    letter-spacing: 1px;
    padding-top: 3px;
}

.pg-ghost-panel-item-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pg-ghost-panel-item-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    color: #1a1a1a;
}

.pg-ghost-panel-item-desc {
    font-size: 13px;
    line-height: 1.55;
    color: #7a7a7a;
}

@media (min-width: 900px) {
    .pg-ghost-panel-item-title {
        font-size: 16px;
    }

    .pg-ghost-panel-item-desc {
        font-size: 14px;
    }
}

/* ---------- 피날레 (AI 뉴런 네트워크 canvas + 대형 전화번호 CTA) ----------
   페이지 박스를 벗어나 브라우저 전체 폭을 사용(풀블리드), 그 자체가
   스냅 슬라이드 하나다. DOM 대신 canvas 하나에 입자와 근접 연결선을
   매 프레임 직접 그려서 가볍게 흐르도록 처리(js/pages/main.js). */
.pg-finale {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #141414;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.pg-finale-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pg-finale-reveal {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 32px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pg-finale-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pg-finale-eyebrow {
    font-size: 13px;
    font-weight: 700;
    color: #FFB800;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.pg-finale-headline {
    font-size: clamp(28px, 8vw, 52px);
    font-weight: 900;
    letter-spacing: -1px;
    color: #ffffff;
    margin-bottom: 36px;
}

/* ---------- 피날레 CTA 3분기 (전화 / 카톡 / 문의폼) ---------- */
.pg-finale-cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.pg-finale-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.2px;
    white-space: nowrap;
    border: 1.5px solid transparent;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.pg-finale-cta-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.pg-finale-cta--phone {
    background: #FFB800;
    color: #141414;
}

.pg-finale-cta--phone:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(255, 184, 0, 0.32);
}

.pg-finale-cta--kakao {
    background: #FEE500;
    color: #3c1e1e;
}

.pg-finale-cta--kakao:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(254, 229, 0, 0.28);
}

.pg-finale-cta--form {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.32);
}

.pg-finale-cta--form:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
}