/* Basic reset */
* {
    box-sizing: borbit-svgder-box;
    margin: 0;
    padding: 0
}


html,
body {

    height: auto;
}

body {
    font-family: Pretendard, Poppins, Notos, system-ui, -apple-system, "Helvetica Neue", "Segoe UI", Roboto;
    background: #000000;
    color: #fff;
    overflow-x: hidden;
    /* 가로 스크롤만 숨기기 (정답) */

}


/* 메뉴 스타일 */
.nav-menu a {
    color: #fff;
    margin-left: 24px;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95rem;
    opacity: 1;
    transition: opacity 0.25s ease;
}

.nav-menu a:hover {
    opacity: 1;
}


/* Progress bar (top) */
#progress-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 10px;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.06);
}

#progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00e5ff, #7b6cff);
    transition: width .12s linear
}

@media (max-width:1024px) {
    #progress-wrap {
        height: 5px;
    }

    #progress-bar {
        background: linear-gradient(90deg, #fff200, #f4014a);

    }
}



/* Header */



.global-header {
    font-family: 'Inter', sans-serif;
    position: fixed;
    top: 4vh;
    left: 4vw;
    right: 8vw;
    width: 60vw;
    padding: 18px 32px;
    display: flex;
    border-radius: 40px;
    font-weight: 500;
    justify-content: space-between;
    align-items: center;
    z-index: 50;

    /* 🔹 글라스모피즘 효과 */
    background: rgba(255, 255, 255, 0.08);
    /* 아주 은은한 유리 느낌 */
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.35);

    /* 🔹 부드러운 그림자 */
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.15),
        0 1px 4px rgba(0, 0, 0, 0.08);

    pointer-events: auto;

    /* 🔹 Hover 애니메이션 지원 */
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        background-color 0.45s ease,
        border-radius 0.45s ease,
        border-color 0.45s ease;

    transform: translateX(400px);
    /* 오른쪽에서 들어오게 */
    opacity: 0;

    animation: headerSlideIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 빛 레이어 */
.global-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    /* ⬅ 더 왼쪽에서 시작 */
    width: 35%;
    height: 100%;

    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.45) 40%,
            rgba(255, 255, 255, 0.0) 100%);

    transform: skewX(-25deg);
    transition: left 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover 시 빛이 좌→우 이동 */
.global-header:hover::after {
    left: 200%;
}

/* 🔥 Hover 시 1.5% 확대 → 약 2px 커지는 느낌 */
.global-header:hover {
    transform: scale(1.015);
    border-radius: 12px;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.20),
        0 2px 6px rgba(0, 0, 0, 0.12);
    border: 1px solid rgb(255, 255, 255);
    background-color: rgba(157, 255, 0, 0.489);
}

@keyframes headerSlideIn {
    0% {
        transform: translateX(400px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


.global-header .logo {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.35);
}

@media (max-width:1024px) {
    global-header .logo {
        font-size: 1.0rem;
    }
}



.nav-menu a {
    margin-left: 18px;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: inline-block;
    height: 20px;
    /* 텍스트 높이에 맞게 조절 */
    transition: color 0.3s ease;
}

/* 내부 텍스트를 span처럼 취급 */
.nav-menu a::before,
.nav-menu a::after {
    content: attr(data-target-text);
    /* 나중에 JS로 실제 텍스트 넣어줌 */
    position: absolute;
    left: 0;
    width: 100%;
    transition: transform 0.5s ease;
}

/* 현재 텍스트 (위로 사라질 텍스트) */
.nav-menu a::before {
    content: attr(data-label);
    /* 원래 텍스트 */
    top: 0;
}

/* 밑에서 올라오는 텍스트 */
.nav-menu a::after {
    content: attr(data-label);
    top: 100%;
}

/* hover 시 */
.nav-menu a:hover::before {
    transform: translateY(-100%);
}

.nav-menu a:hover::after {
    transform: translateY(-100%);
}

/*************햄버거***************************************************/
/* 햄버거 버튼 공통 */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 200;
}

.hamburger span {
    width: 26px;
    height: 3px;
    background: #000000;
    border-radius: 3px;
    transition: all .35s ease;
}

/* 모바일 전체메뉴 오버레이 */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(10, 10, 10, 0.60);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    visibility: hidden;
    opacity: 0;
    transition: opacity .45s ease, visibility .45s ease;
    z-index: 999;
}

.mobile-menu-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* 닫기 버튼 */
.close-btn {
    position: absolute;
    top: 3vh;
    right: 6vw;
    background: transparent;
    border: none;
    font-size: 2.6rem;
    color: #fff;
    cursor: pointer;
}

/* 모바일 nav 스타일 */
.mobile-nav a {
    display: block;
    font-size: 2rem;
    margin: 24px 0;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}



/* 반응형 조건 */
@media (max-width: 1024px) {
    .desktop-nav {
        display: none;
        /* 기존 메뉴 숨김 */
    }

    .global-header {
        width: auto;
        left: 4vw;
        right: 4vw;
        top: 1vh
    }

    .hamburger {
        display: flex;
        /* 햄버거 보이기 */
    }
}

/* 햄버거 → X 애니메이션 */
.hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* 오버레이 슬라이드 + 페이드 */
.mobile-menu-overlay {
    transform: translateY(30px);
}

.mobile-menu-overlay.active {
    transform: translateY(0);
}

/* 모바일 메뉴 콘텐츠 살짝 위로 떠오르기 */
.mobile-nav a {
    opacity: 0;
    transform: translateY(20px);
    transition: all .45s ease;
}

.mobile-menu-overlay.active .mobile-nav a {
    opacity: 1;
    transform: translateY(0);
}





.side-panel {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 40vw;
    /* 🔹 화면 가로 기준 30% */
    height: auto;
    z-index: 50;
    /* 다른 요소 위로 */
}

.side-panel img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width:1024px) {
    .side-panel {
        display: none;
    }
}


.sign {
    position: absolute;
    right: 0;
    bottom: 1vh;

    width: 35vw;
    /* 🔹 화면 가로 기준 30% */
    height: auto;
    z-index: 500;
    /* 다른 요소 위로 */
}

.sign img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width:1024px) {
    .sign {
        display: none;
    }
}

.sign2 {
    position: absolute;
    right: 0;
    bottom: 0vh;

    width: 100vw;
    /* 🔹 화면 가로 기준 30% */
    height: auto;
    z-index: 1;
    /* 다른 요소 위로 */
}

.sign2 img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width:1024px) {
    .sign2 {
        display: none;
    }
}

@media (min-width:2048px) {
    .sign2 {
        display: none;
    }
}

.sign3 {
    position: absolute;
    right: 0;
    bottom: 0vh;

    width: 100vw;
    /* 🔹 화면 가로 기준 30% */
    height: auto;
    z-index: 1;
    /* 다른 요소 위로 */
}

.sign3 img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width:2048px) {
    .sign3 {
        display: none;
    }
}



/* 우측 글라스 패널 */
.side-glass-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 10vw;
    /* 🔥 화면 가로폭의 15% */
    height: 100%;
    pointer-events: none;
    /* 클릭 방해 X */

    /* 🔹 글라스모피즘 효과 */
    background: rgba(255, 255, 255, 0.0);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-left: 1px solid rgba(255, 255, 255, 0);

    /* 🔹 부드러운 그림자 (옵션) */
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

/* 우측 글라스 패널 */
.side-glass-panel2 {
    position: absolute;
    top: 0;
    right: 11vw;
    width: 10vw;
    /* 🔥 화면 가로폭의 15% */
    height: 100%;
    pointer-events: none;
    /* 클릭 방해 X */

    /* 🔹 글라스모피즘 효과 */
    background: rgba(255, 255, 255, 0.0);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-left: 1px solid rgba(255, 255, 255, 0);

    /* 🔹 부드러운 그림자 (옵션) */
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

/* 우측 글라스 패널 */
.side-glass-panel3 {
    position: absolute;
    top: 0;
    right: 22vw;
    width: 10vw;
    /* 🔥 화면 가로폭의 15% */
    height: 100%;
    pointer-events: none;
    /* 클릭 방해 X */

    /* 🔹 글라스모피즘 효과 */
    background: rgba(255, 255, 255, 0.0);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-left: 1px solid rgba(255, 255, 255, 0);

    /* 🔹 부드러운 그림자 (옵션) */
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

/* 우측 글라스 패널 */
.side-glass-panel4 {
    position: absolute;
    top: 0;
    right: 33vw;
    width: 10vw;
    /* 🔥 화면 가로폭의 15% */
    height: 100%;
    pointer-events: none;
    /* 클릭 방해 X */

    /* 🔹 글라스모피즘 효과 */
    background: rgba(255, 255, 255, 0.0);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-left: 1px solid rgba(255, 255, 255, 0);

    /* 🔹 부드러운 그림자 (옵션) */
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

@media (max-width:1024px) {

    .side-glass-panel,
    .side-glass-panel2,
    .side-glass-panel3,
    .side-glass-panel4 {
        display: none;
    }
}

@media (min-width:2048px) {

    .side-glass-panel4,
    .side-glass-panel2,
    .side-glass-panel3 {
        display: none;
    }

    .side-glass-panel {
        width: 18vw;
    }
}

/********************************* 🔹 카드 기본 구조 **********************************************/
/* =========================================
      ⬆ PC / Tablet (1024px 이상) 기본 스타일
========================================= */

.info-card {
    position: relative;
    width: 40vw;
    height: 40vh;
    margin-top: 40px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
}

/* 🔹 카드 이미지 */
.info-card .card-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.9s ease, filter 0.9s ease;
}

/* 🔹 마우스 오버 시 확대 + 어둡게 */
.info-card:hover .card-image {
    transform: scale(1.3);
    filter: brightness(0.85);
}

/* 🔹 텍스트 기본 - 숨김 */
.info-card .card-text00 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 18px 22px;
    color: #fff;

    opacity: 0;
    transform: translateY(15px);

    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 🔹 hover → 텍스트 표시 */
.info-card:hover .card-text00 {
    background-color: #000000a4;
    opacity: 1;
    transform: translateY(0);
}

/* 🔹 타이틀 스타일 */
.info-card .card-text00 h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.3px;
}



/* =========================================
      ⬇ Mobile (1024px 이하) 전면 재정렬
========================================= */
@media (max-width: 1024px) {

    /* 🔹 카드 자체 크기 변경 */
    .info-card {
        width: 85vw;
        /* 모바일 화면에 맞게 넓게 */
        height: auto;
        /* 세로로 자동 확장 */
        cursor: default;
        /* hover 없음 */
    }

    /* 🔹 이미지: 가로 100%, 세로는 자동 */
    .info-card .card-image {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;

        background-size: cover;
        background-position: top 50%;
        /* ← 여기! 세로 기준 75% */

        transform: none !important;
        filter: none !important;
    }


    /* 🔹 텍스트: 이미지 아래로 이동 + 항상 보이기 */
    .info-card .card-text00 {
        position: static !important;
        /* absolute 제거 */
        width: 100%;
        padding: 16px 14px;

        opacity: 1 !important;
        transform: none !important;

        background: transparent !important;
        color: #fff;
    }

    /* hover 효과 완전 제거 */
    .info-card:hover .card-text00,
    .info-card:hover .card-image {
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}


/* ⭐ 가로 100px, 높이 2px 정도의 밝은 직사각형 */
.moving-line {
    width: 100px;
    height: 2px;
    background: rgba(183, 255, 0, 0.9);
    margin-bottom: 20px;
    animation: slideLine 2.2s linear infinite;
}

.moving-line2 {
    width: 100px;
    height: 2px;
    background: rgba(255, 123, 0, 0.9);
    margin-bottom: 20px;
    animation: slideLine 2.2s linear infinite;
}

.moving-line3 {
    width: 100px;
    height: 2px;
    background: rgba(255, 0, 119, 0.9);
    margin-bottom: 20px;
    animation: slideLine 2.2s linear infinite;
}

/* ⭐ 좌 → 우 → 다시 좌로 무한 반복 */
@keyframes slideLine {
    0% {
        transform: translateX(-20px);
    }

    50% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(-20px);
    }
}


/* 🔹 본문 설명 */
/* 더 구체적인 선택자 — 우선 적용해보세요 */
.section .info-card .card-text00 p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;

    background: transparent !important;
    /* 투명 배경 확실히 강제 */
    padding: 0 !important;
    /* 패딩 제거 강제 (필요 시 삭제) */

    color: rgba(255, 255, 255, 0.9) !important;
    /* 글자색 강제 적용 */
    display: block;
    /* 혹시 inline 이면 보장 */
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}




.info-card {
    position: relative;
    overflow: hidden;
}



/* 🔹 More 버튼 스타일 */
.more-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);


    padding: 12px 22px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;

    background: rgba(255, 255, 255, 0.6);
    /* 글라스 느낌 */
    backdrop-filter: blur(12px);
    border-radius: 30px;

    color: #000;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.35);

    transition: background 0.3s ease, transform 0.3s ease;
}

.more-btn:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translate(-50%, -52%);
    opacity: 0%;
}

/* 🔹 기본값: 버튼 숨김 */
.more-btn {
    display: none;
}

/* 🔹 1440px 이상일 때만 표시 */
@media (min-width: 1440px) {
    .more-btn {
        display: inline-flex;
    }
}








.section .content p {
    font-size: clamp(2.4rem, 6vw, 8rem)*0.4;

    /* 🔹 모던한 서체 – 예: 'Montserrat', 'Poppins', 'Inter Tight' */
    font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
    font-weight: 300;
    /* Light */

    /* 🔹 행간을 약간 좁게 */

    max-width: fit-content;

    /* 선택: 더 모던하게 보이도록 약간의 자간 조절 */
    letter-spacing: -0.5px;
    background-color: rgba(30, 85, 8, 0.75);
    border-radius: 8px;
    margin-top: 2vh;

    color: #ffffff;
    padding: 10px 14px;
}

@media (max-width:1024px) {
    .section .content p {
        background-color: transparent;
        padding: 0px 4px;
    }
}

.section .content2 p,
.section .content4 p {
    font-size: clamp(2.4rem, 6vw, 8rem)*0.4;

    /* 🔹 모던한 서체 – 예: 'Montserrat', 'Poppins', 'Inter Tight' */
    font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
    font-weight: 300;
    /* Light */

    /* 🔹 행간을 약간 좁게 */

    max-width: fit-content;

    /* 선택: 더 모던하게 보이도록 약간의 자간 조절 */
    letter-spacing: -0.5px;
    background-color: rgba(0, 127, 246, 0.65);
    border-radius: 8px;
    margin-top: 2vh;

    color: #ffffff;
    padding: 10px 14px;
}

@media (max-width:1024px) {

    .section .content2 p,
    .section .content4 p {
        background-color: transparent;
        padding: 0px 4px;
    }
}


.section .content3 p {
    font-size: clamp(2.4rem, 6vw, 8rem)*0.4;

    /* 🔹 모던한 서체 – 예: 'Montserrat', 'Poppins', 'Inter Tight' */
    font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
    font-weight: 300;
    /* Light */

    /* 🔹 행간을 약간 좁게 */

    max-width: fit-content;

    /* 선택: 더 모던하게 보이도록 약간의 자간 조절 */
    letter-spacing: -0.5px;
    background-color: rgb(15, 56, 4);
    border-radius: 8px;
    margin-top: 2vh;

    color: #ffffff;
    padding: 10px 14px;
}

.section .content4 p {
    font-size: clamp(2.4rem, 6vw, 8rem)*0.4;

    /* 🔹 모던한 서체 – 예: 'Montserrat', 'Poppins', 'Inter Tight' */
    font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
    font-weight: 300;
    /* Light */

    /* 🔹 행간을 약간 좁게 */

    max-width: fit-content;

    /* 선택: 더 모던하게 보이도록 약간의 자간 조절 */
    letter-spacing: -0.5px;
    background-color: rgb(255, 0, 98);
    border-radius: 8px;
    margin-top: 2vh;

    color: #ffffff;
    padding: 10px 14px;
}

@media (max-width:1024px) {

    .section .content3 p,
    .section .content4 p {
        background-color: transparent;
        padding: 0px 4px;
    }
}




/************************************************************************/

/* === 카드 컨테이너 === */
/* =========================================================
   GLOBAL SAFE SETTINGS
========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   FEATURE CARDS GRID
========================================================= */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
    width: 100%;
    margin: 4vh auto 0;
}



/* =========================================================
   CARD FRAME (container)
========================================================= */
.feature-cards .card {
    position: relative;
    /* 오버레이 기준 */
    width: 100%;
    aspect-ratio: 7 / 10;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    z-index: 300;
}



/* =========================================================
   CARD IMAGE LAYER
   → transform/blur/brightness는 여기만 적용
========================================================= */
.card-img {
    position: absolute;
    inset: 0;
    /* 이미지가 카드 전체 채움 */
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: transform 0.45s ease, filter 0.45s ease;
    transform-origin: center center;
    /* 확대 중심 고정 */
    z-index: 1;
}



/* =========================================================
   OVERLAY TEXT (always perfect center!)
========================================================= */
.card-text {
    position: absolute;
    left: 0;
    bottom: -100%;
    /* 숨겨진 상태 */
    width: 100%;

    padding: 15px 20px;

    display: flex;
    justify-content: center;
    /* 가로 중앙 */
    align-items: center;
    /* 세로 중앙 */
    text-align: center;

    font-size: 12px;
    font-weight: 600;
    color: #fbff00;

    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(4px);

    opacity: 0;
    transition: bottom 0.9s cubic-bezier(.2, .9, .2, 1), opacity 0.45s ease;
    z-index: 3;
    pointer-events: none;
    /* 오버레이가 클릭 잡지 않도록 */
}



/* =========================================================
   DESKTOP HOVER EFFECTS
========================================================= */

/* 기본 밝기 초기화 */
.feature-cards:hover .card {
    filter: brightness(100%);
}

/* hover 안 된 이미지 흐림 */
.feature-cards:hover .card:not(:hover) .card-img {
    filter: brightness(70%) blur(3px);
}

/* hover 된 카드 이미지 강조 */
.card:hover .card-img {
    filter: brightness(135%);
    transform: scale(1.04);
}

/* overlay 텍스트 등장 */
.card:hover .card-text {
    bottom: 0;
    opacity: 1;
    pointer-events: auto;
    text-shadow: 0 0 15px rgba(1, 51, 15, 0.9);
}



/* =========================================================
   MOBILE (1024px 이하)
========================================================= */
@media (max-width: 1024px) {

    .feature-cards {
        width: 55vw;
        grid-template-columns: repeat(2, 1fr);
        gap: 2vh;
        justify-items: start;
        margin: 0 auto 0 0;
    }

    .feature-cards .card {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 16px;

        pointer-events: none;
        /* hover 기능 제거 */
        filter: none !important;
        transform: none !important;
    }

    /* hover 관련 전체 해제 */
    .feature-cards:hover .card,
    .feature-cards:hover .card:not(:hover),
    .card:hover,
    .card-img,
    .card:hover .card-text {
        filter: none !important;
        transform: none !important;
    }

    /* 모바일에서는 overlay 감춤 */
    .card-text {
        display: none;
        bottom: 0;
        opacity: 1;
    }
}



/* =========================================================
   4K ULTRA WIDE
========================================================= */
@media (min-width: 2048px) {
    .feature-cards {
        width: 100%;
    }
}




/************************************************************************/
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 배경 꽉 채우기 */
    z-index: -3;
    /* 가장 뒤로 */
    opacity: 1;
    /* 투명도 조절 가능 */
}

/* multi-layer background layers */
.bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    z-index: 1;
    /* 🔹 content 아래 */
}

/* upper overlay layer for tint/glass */
.bg-layer.overlay {
    mix-blend-mode: overlay;
    opacity: 0.95;
    filter: contrast(1.05) saturate(1.05);
    z-index: 2;
}

@media (max-width:1024px) {

    .bg-layer,
    .bg-layer.overlay {
        display: none !important;
    }
}



/* Content area */
.content {
    position: relative;
    z-index: 1000;
    padding: 120px 28px;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
    pointer-events: auto;
}

.content2 {
    position: relative;
    z-index: 1000;
    padding: 120px 28px;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
    pointer-events: auto;
}

.content3 {
    position: relative;
    z-index: 1000;
    padding: 120px 28px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    pointer-events: auto;
}

.content4 {
    position: relative;
    z-index: 1000;
    padding: 120px 28px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    pointer-events: auto;
}

/* Fade transition: we'll toggle .visible on content children */
.content>* {
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, 1, .3, 1);
    opacity: 0;
    transform: translateY(30px)
}

.content.visible>* {
    opacity: 1;
    transform: translateY(0)
}

/* Gallery grid */
/* 기본: 화면 크기에 따라 자동 조정 (2~3개) */
.grid22 {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: stretch;
}

/* 2048px 이상: 가로 3개 고정 */
@media (min-width: 1024px) {
    .grid22 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 2048px 이상: 가로 3개 고정 */
@media (min-width: 2048px) {
    .grid22 {
        grid-template-columns: repeat(3, 1fr);
    }
}


.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
}

@media (max-width:1024px) {
    .gallery-item {
        border-radius: 8px;
    }
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 비율 유지하며 꽉 채움 */
    object-position: center;
    display: block;
    transition: filter .35s ease;
}

/* 이미지에 부드러운 확대 애니메이션 적용 */
.grid22 .gallery-item img {
    transition: transform 0.6s ease, filter 0.6s ease;
}

/* 호버 시 약간 확대 효과(옵션) */
.grid22 .gallery-item:hover img {
    transform: scale(1.5);
    transition: opacity 0.6s ease, transform 0.6s ease;

}

/* 앞의 2개 이미지에만 Hover 효과 적용 */
.grid22 .gallery-item:nth-child(-n+2):hover img {
    filter: brightness(35%);
    transform: scale(1.5);
    transition: opacity 0.6s ease, transform 0.6s ease;

}

.grid22 .gallery-item:nth-child(-n+2):hover .item-text {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 기본적으로 텍스트 숨김 */
/* 모든 item-text 공통 */
.item-text {
    position: absolute;
    top: 50%;
    /* 세로 중앙 */
    left: 50%;
    /* 가로 중앙 */
    transform: translate(-50%, -50%);
    /* 정확한 중앙 */

    color: #fff;
    font-size: clamp(1rem, 2vw, 1.6rem);
    font-weight: 500;

    text-align: center;
    /* 글자 중앙 정렬 */
    white-space: nowrap;
    /* 필요 시 줄바꿈 방지 */

    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    z-index: 500;
}


/* 🔥 앞의 2개만 효과 */
.hover-target:hover img {
    filter: brightness(35%);
}

/* 🔥 hover 시: 위치가 중앙으로 올라오고 opacity 1 */
.gallery-item:hover .item-text,
.img-box:hover .item-text,
.item:hover .item-text {
    opacity: 1;
    transform: translate(-50%, -50%);
    /* 중앙으로 이동 */
}

.gallery-item,
.img-box,
.item {
    position: relative;
    overflow: hidden;
    /* 필요하면 사용 */
}


/* Motion target — will be transformed by JS for advanced image motion */
.motion {
    will-change: transform;
}

/* small responsive tweaks */
@media (max-width:900px) {
    #dot-nav {
        left: 8px
    }

    .content {
        padding: 90px 18px
    }

    .gallery-item {
        height: auto
    }
}

/* Accessibility focus */
button:focus,
a:focus {
    outline: 2px solid rgba(123, 108, 255, 0.3);
    outline-offset: 3px
}



/********************** more ***********************************/
/* 기본 버튼 스타일 */
.btn-more {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    gap: 10px;

    /* 🔹 여백(패딩) 추가 */
    padding: 10px 18px;
    /* 위아래 10px, 좌우 18px */

    /* 🔹 모서리 라운드 강화 */
    border-radius: 16px;

    background: rgba(0, 0, 0, 0.781);
    color: rgb(187, 187, 187);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.06em;

    transition: background 0.28s ease,
        color 0.28s ease,
        transform 0.16s ease,
        box-shadow 0.28s ease;
}


/* 텍스트와 화살표 스타일 */
.btn-more .btn-text {
    display: inline-block;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--neon-contrast);
    transition: color 0.28s ease;
}

.btn-more .btn-arrow {
    display: inline-block;
    color: var(--neon-contrast);
    transition: transform 0.28s ease, color 0.28s ease;
}

/* Hover / Focus */
.btn-more:hover,
.btn-more:focus {

    /* 🔹 1px 테두리 추가 */
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* 은은한 화이트 */

    color: chartreuse;
    outline: none;
    transform: translateY(-2px);
}

.btn-more:hover .btn-text,
.btn-more:focus .btn-text {
    color: var(--neon);
}

.btn-more:hover .btn-arrow,
.btn-more:focus .btn-arrow {
    color: var(--neon);
    transform: translateX(6px);
    /* 화살표 약간 이동 */
}

/* 포커스 가시성 (키보드 접근성) */
.btn-more:focus-visible {
    box-shadow: 0 0 0 4px rgba(124, 255, 107, 0.12), 0 10px 30px rgba(0, 0, 0, 0.45);
    border-color: var(--neon);
}

/* 작아지는 화면에서 버튼 크기 조정 */
@media (max-width: 480px) {
    .btn-more {
        padding: 8px 14px;
        gap: 8px;
        border-radius: 8px;
    }

    .btn-more .btn-text {
        font-size: 0.85rem;
    }
}



/***********************modal********************************************/
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}





.close-btn2 {
    position: fixed;
    /* 항상 화면 기준으로 고정 */
    top: 2vh;
    /* 화면 상단에서 2vh */
    right: 2vw;
    /* 화면 우측에서 2vw */

    font-size: 60px;
    /* 아이콘 크기 */
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 100000;
}

@media (max-width: 768px) {
    .close-btn2 {
        font-size: 40px;
        top: 2vh;
        right: 3vw;
    }
}

@media (max-width: 480px) {
    .close-btn2 {
        font-size: 34px;
        top: 1.5vh;
        right: 3vw;
    }
}



.slider {
    position: relative;
    width: 70vw;
    max-width: 800px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slides {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.slide {
    min-width: 100%;
    object-fit: contain;
    display: none;
}

.slide.active {
    display: block;
}

.prev,
.next {
    cursor: pointer;
    background: none;
    border: none;
    font-size: 48px;
    color: #aaff00;
    padding: 16px;
    transition: opacity 0.3s;
}

.prev:hover,
.next:hover,
.close-btn:hover {
    opacity: 0.7;
}

@media (max-width:1024px) {
    .slider {
        width: 90vw;
    }
}


/************************************************************/

/* 전체 모달 */
.modal22 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.modal22.active {
    display: flex;
    z-index: 100000;
}

.close-btn22 {
    position: fixed;
    /* 항상 화면 기준으로 고정 */
    top: 2vh;
    /* 화면 상단에서 2vh */
    right: 2vw;
    /* 화면 우측에서 2vw */

    font-size: 60px;
    /* 아이콘 크기 */
    color: #fff;
    background: none;
    border: none;
    cursor: pointer !important;
    z-index: 100001;
}

@media (max-width: 768px) {
    .close-btn22 {
        font-size: 40px;
        top: 2vh;
        right: 3vw;
    }
}

@media (max-width: 480px) {
    .close-btn22 {
        font-size: 34px;
        top: 1.5vh;
        right: 3vw;
    }
}



.slider22 {
    position: relative;
    width: 70vw;
    max-width: 800px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slides22 {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.slide22 {
    min-width: 100%;
    object-fit: contain;
    display: none;
}

.slide22.active {
    display: block;
}

.prev22,
.next22 {
    cursor: pointer;
    background: none;
    border: none;
    font-size: 48px;
    color: #aaff00;
    padding: 16px;
    transition: opacity 0.3s;
}

.prev22:hover,
.next22:hover,
.close-btn22:hover {
    opacity: 0.7;
}

@media (max-width:1024px) {
    .slider22 {
        width: 90vw;
    }
}




/*************************비디오 modal************************/

/* gallery layout */
.video-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 1.5vw;
    margin-top: 4vh;
    align-items: start;
}

/* 각 아이템 9:16 비율 유지 */
.video-item {
    position: relative;
    aspect-ratio: 9/16;
    /* ★ 강력 추천 */
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px;
    display: block;
}

/* video & thumb 공통 */
.desktop-video,
.mobile-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
}

/* 모바일에서는 video 숨기고 thumbnail만 보이게 */
@media (max-width: 1024px) {
    .desktop-video {
        display: none;
    }

    .mobile-thumb {
        display: block;
    }
}

/* 데스크탑에서는 video 보이게, thumb 숨김 */
@media (min-width: 1025px) {
    .desktop-video {
        display: block;
        transition: transform 0.35s ease;
    }

    .mobile-thumb {
        display: none;
    }

    /* 마우스오버 시 살짝 스케일(원하시면 1.05~1.12로 조정) */
    .video-item:hover .desktop-video {
        transform: scale(1.12);
    }
}

/* Play 아이콘 공통 스타일 */
.video-item::after {
    content: "\25B6";
    /* ▶ Unicode */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: translate(-50%, -50%) scale(0.85);
}

.video-item:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Hover 시 Play 아이콘 노출 */
@media (min-width: 1025px) {
    .video-item:hover::after {
        opacity: 1;
    }

    /* Hover 시 영상 어두워짐 */
    .video-item:hover .desktop-video {
        filter: brightness(40%);
        transform: scale(1.12);
    }
}


/*******************************************************************/

/* 👉 s5 이외 섹션에서는 미니영상 pointer-events 비활성화 */
.section:not(#s5) .mini-video-container,
.section:not(#s5) .mini-video-item,
.section:not(#s5) video {
    pointer-events: none !important;
}

/* 🔥 우측 하단 기본 위치 */
.mini-video-container {
    position: absolute;
    right: 2vw;
    bottom: 4vh;
    display: flex;
    flex-direction: row;
    gap: 10px;
    z-index: 50;
}

/* ✔ 6:19 비율 유지 (aspect-ratio: 6/19) */
.mini-video-item {
    position: relative;
    width: 150px;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
}

@media (min-width:2048px) {
    .mini-video-item {
        width: 250px;
    }
}

/* 재생 중 강조 효과 */
.mini-video-item.highlight {
    filter: brightness(1.15);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.7),
        0 0 20px rgba(255, 255, 255, 0.4);
    transform: scale(1.03);
    transition: all 0.25s ease;
}

/* 영상 자체도 조금 밝게 */
.mini-video-item.highlight video {
    filter: brightness(1.1);
}


/* 영상 자체 */
.mini-video-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85);
    transition: filter 0.3s ease;
}

/* ▷ 플레이 아이콘 */
.play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    opacity: 0;
    transition: 0.2s;
    pointer-events: none;
}

.mini-video-item:hover .play-icon {
    opacity: 1;
}

.mini-video-item:hover video {
    filter: brightness(1);
}

/* 🔥 반응형 — 화면이 좁아지면 3개가 가로 정렬 */
@media (max-width: 1024px) {
    .mini-video-container {
        flex-direction: row;
        width: 80vw;
        right: 50%;
        transform: translateX(50%);
        bottom: 50px;
    }
}

/* 🔥 더 작은 화면에서는 크기 축소 */
@media (max-width: 600px) {
    .mini-video-item {
        width: 80%;
    }
}


/***************************************************************/

.image-slider {
    display: flex;
    width: 45vw;
    height: auto;
    overflow: hidden;
    gap: 4px;
    /* ← 이미지 사이 간격 추가 */
}

.image-slider2 {
    position: fixed;
    right: 2vw;
    bottom: 2vh;
    display: flex;
    width: 45vw;
    overflow: hidden;
    gap: 4px;
    z-index: 999;
}

@media (max-width: 1024px) {
    .image-slider {
        width: 85vw;
    }
}


.img-box {
    width: 20%;
    height: 350px;
    position: relative;
    cursor: pointer;
    transition: width 0.6s ease;
    overflow: hidden;
    border-radius: 8px;
    z-index: 500;
}

@media (min-width:2048px) {
    .img-box {
        height: 500px;
    }
}


/* 마우스 오버 시 이미지 밝게 */
.img-box:hover img {
    filter: brightness(1.8);
    transition: filter 0.3s ease;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 활성 이미지 */
.img-box.active {
    width: 100%;
    border-radius: 20px;
}


/* 제목 스타일 */
.img-title {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: #fff;
    font-size: 1.0rem;
    opacity: 1;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

/* 기본(비활성) 제목 숨김 */
.img-box:not(.active) .img-title {
    opacity: 0;
}



.slider-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-item:hover .slider-video {
    filter: brightness(115%);
}



/* CSS */
.scroll-icon {
    position: fixed;
    right: 4vw;
    bottom: 20px;
    /* 화면 하단으로부터 20px */
    transform: translateX(-50%);
    /* 가로 가운데 정렬 */

    width: 30px;
    /* 가로 60px */
    height: 50px;
    /* 세로 100px */
    border: 2px solid #fff;
    /* 1px 흰색 테두리 */
    border-radius: 15px;
    /* 모서리 둥글게 (원하시면 숫자 조정) */
    display: flex;
    align-items: center;
    /* 수직 중앙 기준(기본 dot 시작 위치) */
    justify-content: center;
    background: #ffffff32;
    box-sizing: border-box;
    pointer-events: none;
    /* 클릭 방해하지 않음 */
    z-index: 9999;
}

@media (min-width:1024px) {
    .scroll-icon {
        display: none;
    }
}

/* 내부 컨테이너: 위치기준 및 overflow 처리 */
.scroll-icon .frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 이동하는 작은 원 */
.scroll-icon .dot {
    position: absolute;
    left: 50%;
    top: 50%;
    /* 세로 절반 위치에서 시작 */
    transform: translate(-50%, -50%);
    width: 8px;
    /* 원 크기 (원하면 조절) */
    height: 8px;
    border-radius: 50%;
    background: #fff;
    /* 원 색상 (테두리와 동일) */
    box-shadow: none;
    opacity: 1;
    /* 애니메이션: 위로 이동 후 다시 원래 위치로 돌아오는 루프 */
    animation: moveUp 1.6s cubic-bezier(.2, .9, .2, 1) infinite;
}

/* 애니메이션 키프레임: 0% 시작 -> 60% 위 이동 -> 100% 원위치 (투명해짐) */
@keyframes moveUp {
    0% {
        transform: translate(-50%, 0);
        /* 시작: 중앙(절반) */
        opacity: 1;
    }

    60% {
        transform: translate(-50%, -23px);
        /* 위쪽으로만 이동 (값 조정 가능) */
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 0);
        /* 다시 원위치로 */
        opacity: 0;
        /* 살짝 숨기고 재시작 */
    }
}

/* 사용자의 '감속모션(감소모션)' 선호를 존중 */
@media (prefers-reduced-motion: reduce) {
    .scroll-icon .dot {
        animation: none;
        opacity: 1;
    }
}


.content_set {
    position: fixed;
    /* 화면 기준 고정 */
    bottom: 4vh;
    /* 화면 하단에서 여백 */
    right: 4vw;
    /* 화면 왼쪽에서 여백 */

    width: 35vw;
    /* 🔹 화면 가로의 40% */
    max-width: 900px;


    z-index: 9999;
    /* 다른 요소보다 위 */
}

@media (max-width: 1024px) {
    .content_set {

        transform: translateX(-50%);
        /* 화면 중앙 정렬 */
        width: 90vw;
        /* 모바일은 조금 더 넓게 */
    }
}


.small-dot {
    display: inline-block;
    width: 6px;
    /* 원 크기 */
    height: 6px;
    background-color: rgb(34, 255, 0);
    border-radius: 50%;
    /* 완전한 원 */
    margin-right: 8px;
    /* 글자와 간격 */
    position: relative;
    top: -1px;
    /* 🔥 글씨 중앙에 맞게 미세 보정 */
}

.small-dot2 {
    display: inline-block;
    width: 6px;
    /* 원 크기 */
    height: 6px;
    background-color: rgb(0, 251, 255);
    border-radius: 50%;
    /* 완전한 원 */
    margin-right: 8px;
    margin-left: 8px;
    /* 글자와 간격 */
    position: relative;
    top: -4px;
    /* 🔥 글씨 중앙에 맞게 미세 보정 */
}





#s7 .special-p {
    padding: 12px 18px;
    margin-top: 2vh;
    border-radius: 10px;

    /* 🔥 메탈 배경 + 투명도 75% */
    background: linear-gradient(135deg,
            rgba(93, 93, 93, 0.75) 0%,
            rgba(62, 62, 62, 0.75) 25%,
            rgba(122, 122, 122, 0.75) 50%,
            rgba(47, 47, 47, 0.75) 75%,
            rgba(91, 91, 91, 0.75) 100%);

    background-blend-mode: overlay;

    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.25),
        inset 0 0 14px rgba(0, 0, 0, 0.5),
        0 4px 14px rgba(0, 0, 0, 0.4);

    color: #fefefe;
    letter-spacing: -0.5px;
}

#s8 .special-h1 {
    color: #ff0180;
    font-size: clamp(2.4rem, 6vw, 8rem);

    /* 🔹 모던한 서체 */
    font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
    font-weight: 900;

    /* 🔹 행간을 약간 좁게 */
    line-height: 0.92;

    /* 🔹 자간 조절 */
    letter-spacing: -2px;

    /* 🔹 초기 상태(안 보임) */
    opacity: 0;
    transform: translateY(20px);

    /* 애니메이션 */
    animation: fadeInH1 3s ease-out forwards;
}

#s8 .special-h2 {
    color: #ffffff;

    font-size: clamp(0.85rem, 2vw, 2.0rem);

    /* 🔹 모던한 서체 */
    font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
    font-weight: 600;

    /* 🔹 행간을 약간 좁게 */
    line-height: 1.2;

    /* 🔹 자간 조절 */
    letter-spacing: 0.1px;

    /* 🔹 초기 상태(안 보임) */
    opacity: 0;
    transform: translateY(20px);

    /* 애니메이션 */
    animation: fadeInH1 3s ease-out forwards;
}



@media (max-width:1024px) {
    #s7 .special-p {
        background: rgba(0, 0, 0, 0.5);
        box-shadow: none;

        /* 🔹 사방 여백 크게 */
        padding: 14px 18px;

        border: solid 1px rgba(255, 255, 255, 0.6);
        border-radius: 10px;
        /* 모바일에서 둥근 느낌 추가 */
    }
}


.radio-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 40px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    transition: background 0.3s ease, border-color 0.3s ease;
    z-index: 1000;
}

.radio-toggle .icon {
    font-size: 1.2rem;
    transform: translateY(1px);
}

/* 처음에는 ON 상태 → OFF 아이콘 숨김 */
.radio-toggle .icon.off {
    display: none;
}

/* OFF 상태 클래스가 붙었을 때 */
.radio-toggle.off {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.12);
}

.radio-toggle.off .icon.on {
    display: none;
}

.radio-toggle.off .icon.off {
    display: inline;
}



/* 전체 바 (가로로 꽉 차는 박스) *********************************************************/
/* 하단 바 */
.thumbnail-bar {
    position: absolute;
    bottom: 2vh;
    width: 100%;
    z-index: 9;
    overflow: visible !important;
    pointer-events: auto;
}

/* 트랙 */
.thumb-track {
    display: flex;
    width: max-content;
    gap: 4px;
    animation: scrollLeft 20s linear infinite;
    overflow: visible !important;
    position: relative;
    z-index: 9;
}

/* 리스트 */
.thumb-list {
    display: flex;
    gap: 12px;
    overflow: visible;
}

/* 개별 아이템 */
.thumb-item {
    width: 120px;
    height: 120px;
    position: relative;
    flex-shrink: 0;
    overflow: visible !important;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    /* 이미지만 둥글게 */
    opacity: 55%;
}

/* 툴팁 */
.thumb-tooltip {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    background: red !important;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #fff;
    white-space: nowrap;
    font-size: 13px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10;
}

.thumb-item:hover .thumb-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* 무한 루프 애니메이션 */
@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* MOBILE */
@media (max-width: 1024px) {
    .thumbnail-bar {
        bottom: 4vh;
    }

    .thumb-track {
        cursor: grab;
        left: 4vw;
    }

    .thumb-tooltip {
        display: none;
    }

    .thumb-item {
        width: 80px;
        height: 80px;
    }
}


/***************************************************/
/* 🔥 우측 하단 기본 위치 */
.mini-video-container2 {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-top: 24px;
    /* 문장과 영상 사이의 적절한 여백 */
    z-index: 5;
}

/* ✔ 6:19 비율 유지 (aspect-ratio: 6/19) */
.mini-video-item2 {
    position: relative;
    width: 150px;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
}

@media (min-width:2048px) {
    .mini-video-item2 {
        width: 250px;
    }
}

/* 재생 중 강조 효과 */
.mini-video-item2.highlight {
    filter: brightness(1.15);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.7),
        0 0 20px rgba(255, 255, 255, 0.4);
    transform: scale(1.03);
    transition: all 0.25s ease;
}

/* 영상 자체도 조금 밝게 */
.mini-video-item2.highlight video {
    filter: brightness(1.1);
}


/* 영상 자체 */
.mini-video-item2 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85);
    transition: filter 0.3s ease;
}

/* ▷ 플레이 아이콘 */
.play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    opacity: 0;
    transition: 0.2s;
    pointer-events: none;
}

.mini-video-item2:hover .play-icon {
    opacity: 1;
}

.mini-video-item2:hover video {
    filter: brightness(1);
}

/* 🔥 반응형 — 화면이 좁아지면 3개가 가로 정렬 */
@media (max-width: 1024px) {
    .mini-video-container2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* ⭐ 가로 3개까지만 배치하고 나머지는 줄바꿈 */
        width: 100%;
        justify-content: left;
        gap: 8px;
        margin: 0 auto;
        position: relative;
        bottom: 0;
        right: 0;
        transform: none;
    }

    .mini-video-item2 {
        flex: 1 1 calc(33.33% - 8px);
        /* ⭐ 한 줄에 정확히 3개 */
        max-width: calc(33.33% - 8px);
    }
}


/* 🔥 더 작은 화면에서는 크기 축소 */
@media (max-width: 600px) {
    .mini-video-item {
        width: 80%;
    }
}

/****************************************************/

/* 가로 스크롤 전체 영역 */
.rowlineimg {
    width: 100%;
    overflow: hidden;

    position: fixed;
    bottom: 0;
    left: 0;

    background: rgba(255, 255, 255, 0.85);
    /* 배경 필요 시 */
    backdrop-filter: blur(10px);
    /* 옵션 */

    padding: 10px 0;
    /* 이미지가 바닥에 붙지 않게 */
    z-index: 9999;
    /* 항상 위에 보이도록 */
}


/* 가로로 이어진 이미지 트랙 */
.imgtrack {
    display: flex;
    gap: 20px;
    padding: 30px;
    cursor: grab;
    user-select: none;
    transition: transform 0.25s ease;
}

.imgtrack:active {
    cursor: grabbing;
}

/* 개별 이미지 */
.item {
    width: 200px;
    height: 130px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

/* 클릭 시 선택된 이미지 효과 */
.item.active {
    transform: scale(1.12);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.25);
}

/* TIP 스타일 */
.tip {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);

    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 14px;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.tip.show {
    opacity: 1;
}

.hidden {
    display: none;
}

/*****************************************************************/

/* ===== 하단 고정 바 ===== */
/* ================= Base Vars ================= */
:root {
    --bar-h: 102px;
    /* 하단 바 높이 */
    --thumb-h: 100px;
    /* 썸네일 높이 */
    --tip-gap: 28px;
    /* 이미지 윗변과 말풍선 사이 간격 */
}

/* ================= Bottom Marquee Shell ================= */
.rb-bottom-marquee {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(12, 12, 12, 0.55);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* 1024px 미만에서는 숨김 */
@media (max-width: 1023.98px) {
    .rb-bottom-marquee {
        display: none;
    }
}

/* 본문이 가려지지 않게 여백 */
@media (min-width: 1024px) {
    body {
        padding-bottom: var(--bar-h);
    }
}


/************************************************************/
.putter_img {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: start;
    margin-top: 2vh;

}

.putter_img img {
    height: clamp(100px, 14vw, 160px);
    width: auto;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}


@media (max-width:1024px) {
    .putter_img img {
        height: 100px;
    }
}

/**************************************************************/
/* ================================
   LAST GRID 기본 레이아웃
================================ */
.last_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    padding: 10px 0;
    z-index: 100;
}

/* 카드 공통 */
.last_grid .card {
    position: relative;
    width: clamp(70px, 12vw, 120px);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.45s ease, box-shadow 0.35s ease;
}

.last_grid .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.35s ease;
}

/* 텍스트 오버레이 */
.last_grid .card-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: clamp(12px, 1.2vw, 18px);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

/* =======================================
   1) 첫 번째 카드: hover 효과 완전 제거
======================================= */
.last_grid .card:first-child:hover {
    transform: none !important;
    box-shadow: none !important;
}

.last_grid .card:first-child:hover img {
    filter: none !important;
}

.last_grid .card:first-child:hover .card-text {
    opacity: 0 !important;
}

/* =======================================
   2) 세 번째 카드 (swap) : hover 시 이미지 교체만
======================================= */

.card.swap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 기본이미지는 보임 */
.card.swap .img-hover {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.card.swap .img-default {
    opacity: 1;
    transition: opacity 0.35s ease;
}

/* hover 시 이미지 교체 */
.card.swap:hover .img-default {
    opacity: 0;
}

.card.swap:hover .img-hover {
    opacity: 1;
}

/* 3번째 카드는 기존 hover 효과 제거 */
.card.swap:hover {
    transform: none !important;
    box-shadow: none !important;
}

.card.swap:hover img {
    filter: none !important;
}

.card.swap:hover .card-text {
    opacity: 0 !important;
}

/* =======================================
   3) 나머지 카드 기본 hover 효과
======================================= */
.last_grid .card:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.last_grid .card:hover img {
    filter: brightness(35%);
}

.last_grid .card:hover .card-text {
    opacity: 1;
}

/*******************************************************/

.content.gallery2 h2 {
    color: #3d3d3d;
    /* 원하는 색상 */
}

/******************************************************/

/* =============================
   🔹 썸네일 리스트 (motion)
============================= */
.motion-list {
    display: flex;
    gap: 16px;
    margin-top: 20px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.motion {
    position: relative;
    width: clamp(120px, 20vw, 200px);
    /* 🔥 반응형 핵심 */
    aspect-ratio: 3/4;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform 0.3s ease;
}

.motion img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.motion:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}


/* 🔹 Play 아이콘 */
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}

.motion:hover .play-icon {
    opacity: 1;
}

/* =============================
   🔥 motion-modal (전체 화면)
============================= */
.motion-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: left;
    z-index: 99999;
}

.motion-modal.active {
    display: flex !important;
}

/* 🔥 왼쪽 50%를 영상으로 채움 */
.motion-video-container {
    width: 50vw;
    height: 86vh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;

    /* 🔥 오른쪽 위/아래만 라운드 */
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

@media (max-width:1200px) {
    .motion-video-container {
        width: 100%;
        height: 100%;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.motion-video-container video {
    max-width: 100%;
    /* 가로 영상 지원 */
    max-height: 100%;
    /* 세로 영상 지원 */
    width: auto;
    /* 비율 유지 */
    height: auto;
    /* 비율 유지 */
    object-fit: contain;
}

/* 🔥 닫기 버튼 */

.motion-close-btn {
    position: absolute;
    top: 50%;
    right: 45%;
    font-size: 50px;
    color: rgb(208, 255, 0);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 100000;
}


@media (max-width:1200px) {
    .motion-close-btn {
        position: absolute;
        top: 30px;
        right: 40px;
        font-size: 48px;
        color: rgb(208, 255, 0);
        background: none;
        border: none;
        cursor: pointer;
        z-index: 100000;
    }
}

/************************************************************/

/* 🔥 전체 로딩 화면 */
#loadingScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    backdrop-filter: blur(2px);
}

/* 전체 박스 → 로고 + 로딩바 세트 */
.loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    /* 로고와 바 사이 여백 */
}

/* 🔥 로고 스타일 */
.loading-logo {
    width: 200px;
    /* 요청하신 크기 */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 10px #39ff14);
    /* 네온 그린 glow 효과(선택) */
}

/* 로딩바 컨테이너 */
.loader-wrapper {
    width: 50vw;
    max-width: 420px;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    overflow: hidden;
}

/* 형광 그린 로딩바 */
.loader-bar {
    width: 0%;
    height: 100%;
    background: #39ff14;
    box-shadow: 0 0 12px #39ff14, 0 0 25px #39ff14;
    border-radius: 50px;
    animation: loadingMove 2.4s ease-in-out infinite;
}

@keyframes loadingMove {
    0% {
        width: 0%;
    }

    50% {
        width: 85%;
    }

    100% {
        width: 0%;
    }
}

/*********************************************************/

.sns-footer {
    width: 100%;
    padding: 40px 0;
    display: flex;
    justify-content: flex-start;
    gap: 28px;
    background: transparent;
    /* 하단 배경 유지 */
}

.sns-icon {
    display: inline-flex;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: transform 0.33s ease;
}

@media (max-width:1200px) {
    .sns-icon {
        width: 38px;
        height: 38px;
    }
}


.sns-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(1) brightness(0.9);
    /* 기본 흑백 모드 */
    transition: 0.33s ease;
}

.sns-icon:hover {
    transform: scale(1.18);
}

.sns-icon:hover img {
    filter: grayscale(0) brightness(1) drop-shadow(0 0 6px #39ff14);
    /* 네온 글로우 */
}

/************************************************************************************************/

/* 공통 블록 */
.block {
    width: min(1100px, 100% - 40px);
    margin: 0 auto 80px auto;
}

/* 내부 패딩 통일 */
.block-inner {
    padding: 24px 0;
}

/* 스플릿 레이아웃 */
.block-split {
    display: flex;
    gap: 32px;
    align-items: center;
}

.block-split .split-media {
    flex: 1;
}

.block-split .split-text {
    flex: 1;
}

.block-split .split-media img {
    width: 100%;
    height: auto;
    max-width: 500px;
    /* 🔥 원하는 가로 제한 */
    /* 가로 중앙 정렬 margin: 0 auto; */
    margin: 0;
    /* ← 중앙 정렬 제거 → 좌측 정렬 */
    display: block;
    border-radius: 8px;
}


/* 좌우 반전 */
.block-split--reverse {
    flex-direction: row-reverse;
}

/* 풀폭 스트립 */
.block-strip {
    position: relative;
    height: 40vh;
    min-height: 260px;
    border-radius: 8px;
    overflow: hidden;
}

.block-strip4 {
    position: relative;
    display: block;
    width: 100%;
    height: 60vh;
    /* 필요에 따라 조절 */
    background-image: url("./2025_pp/pu_003.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.block-strip .strip-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.block-strip .strip-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0.15));
}

.strip-overlay {
    text-align: center;
    /* 전체 중앙 정렬 */
}

.strip-title {
    margin-bottom: 12px;
    /* h1 아래 공간 확보 */
}

.strip-overlay p {
    display: block;
    /* 줄 바꿈 보장 */
    margin: 0 auto;
    /* 블록 요소 중앙 배치 */
    max-width: 600px;
    /* 너무 넓어지는 것 방지 (선택 사항) */
    text-align: center;
    /* 텍스트 중앙 정렬 */
    line-height: 1.4;
}

.block-strip2 {
    position: relative;
    height: 30vh;
    width: 100%;
    min-height: 260px;
    overflow: hidden;
}

.block-strip2 .strip-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.block-strip2 .strip-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

}

.strip-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.strip-bg-image {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
    /* 영상처럼 꽉 차게 */
    display: block;
    position: relative;
    z-index: 1;
}



/* 중앙 텍스트 블록 */
.block-center .center {
    text-align: center;
}

/* 반응형: 좁은 화면에서 스플릿 쌓기 */
@media (max-width: 768px) {

    .block-split,
    .block-split--reverse {
        flex-direction: column;
    }
}

/********************************************************************************/

/* 🔥 전체 HERO 컨테이너 */
.wedge-bg {
    position: relative;
    width: 100%;
    height: 50vh;
    overflow: hidden;
    z-index: 1;
}

/* 🔥 배경 영상 */
.wedge-bg .wedge-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 75vh;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1;
}

@media (max-width:1200px) {

    /* 🔥 배경 영상 */
    .wedge-bg .wedge-video {
        height: 55vh;
    }

    .wedge-bg {
       
        height: 40vh;
   
    }
}

/* 🔥 영상 위 어둡게 덮는 레이어 */
.wedge-bg .wedge-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);

    z-index: 2;
}

/* 🔥 텍스트 영역 */
.wedge-bg .wedge-content {
    position: absolute;
    inset: 0;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    color: #fff;
    padding: 0 24px;
}

/* 제목 */
.wedge-bg h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 14px;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}

/* 설명 */
.wedge-bg p {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    opacity: 0.9;
}

/**********************************************************************************/

.noto700 {
    font-family: "Noto Sans KR", "Noto Sans", sans-serif;
    font-weight: 600;
    /* 🔥 Bold */
    background-color: #ff006aca;
    margin: 10px;
    padding: 10px 20px 10px 20px;
    border-radius: 60px;
}

/**********************************************************************************/


.text2 {
    color: #000000;
    /* 원하는 색상 */
    line-height: 1.6;
    font-weight: 400;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 10px;
    z-index: 100;
}

/**********************************************************************************/


.strip-bg-video {
    width: 100%;
    height: 70vh;
    object-fit: cover;

    position: absolute;
    inset: 0;
    z-index: 1;

    /* 🔥 위로 30% 끌어올려서 윗부분 감춤 */
    transform: translateY(-30%);
}


/* 텍스트 오버레이 */
.strip-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.15));

    z-index: 3;
    /* 🔥 글씨를 영상 위로 올리기 */
}

.strip-overlay4 {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.3);
    /* 투명도 낮추기 */
    z-index: 3;
    /* 🔥 글씨를 영상 위로 올리기 */
}

.strip-title {
    color: #fff;
    /* 흰색으로 명확하게 */
    font-size: clamp(2rem, 4vw, 2.4rem);
    font-weight: 700;
    text-align: center;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    z-index: 4;
}

.kicker {
    color: #ff8a05;
    /* 원하는 색상으로 변경 */
}

/************************************************************************/
/* GRID 자체에는 z-index를 주지 않음 */
.wedge-grid {
    width: 60vw;
    max-width: 900px;
    margin: 10px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    position: relative;
    overflow: visible;
}

/* 🔥 overlay: 초기에는 보이지 않음 */
.wedge-grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    /* 🔥 배경 어둡기 정도 */
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    z-index: 5;
    /* grid 위, 확대 이미지 아래 */
}

/* 어떤 이미지라도 hover되면 grid 전체가 어두워짐 */
.wedge-grid:hover::before {
    opacity: 1;
}


/* ITEM에도 z-index 제거 — stacking context를 만들면 안됨 */
.wedge-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: visible;
    /* z-index: 1;  ❌ 절대 넣지 말 것 */
}

.wedge-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: transform .45s ease, z-index .3s ease;
    position: relative;
}

/* 🔥 모든 이미지들 위로 강제로 띄우기 */
.wedge-item:hover img {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 0px;
    transform: translate(-50%, -50%) scale(2.5);
    z-index: 999999;
    /* 최상단 */
    pointer-events: none;
    /* 필요시 */
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    /* 고급 그림자 */
}








@media (max-width:1200px) {
    .wedge-grid {
        gap: 8px;
        /* 이미지 간격 */
    }
}

/* ============================================
   🔥 WEDGE GRID : 4 columns × 3 rows = 12 items
   ============================================ */

/* 1행 -------------------------------------- */
.wedge-item:nth-child(1) img {
    transform-origin: top left;
}

.wedge-item:nth-child(2) img {
    transform-origin: top center;
}

.wedge-item:nth-child(3) img {
    transform-origin: top center;
}

.wedge-item:nth-child(4) img {
    transform-origin: top right;
}

/* 2행 -------------------------------------- */
.wedge-item:nth-child(5) img {
    transform-origin: center left;
}

.wedge-item:nth-child(6) img {
    transform-origin: center center;
}

.wedge-item:nth-child(7) img {
    transform-origin: center center;
}

.wedge-item:nth-child(8) img {
    transform-origin: center right;
}

/* 3행 -------------------------------------- */
.wedge-item:nth-child(9) img {
    transform-origin: bottom left;
}

.wedge-item:nth-child(10) img {
    transform-origin: bottom center;
}

.wedge-item:nth-child(11) img {
    transform-origin: bottom center;
}

.wedge-item:nth-child(12) img {
    transform-origin: bottom right;
}


.green-arrow {
    color: #39FF14;
    /* 형광 그린 */
    font-weight: 700;
    margin-right: 8px;
    font-size: 1.2em;
    display: inline-block;
    /* 🔥 애니메이션(transform) 위해 필수 */
}

/* 좌우 무한 반복 애니메이션 */
.arrow-anim {
    animation: arrowMove 1.2s ease-in-out infinite;
}

@keyframes arrowMove {
    0% {
        transform: translateX(-3px);
    }

    50% {
        transform: translateX(3px);
    }

    100% {
        transform: translateX(-3px);
    }
}


.divider {
    width: 100%;
    height: 1px;
    background: #ffffff;
    /* 백색 라인 */
    margin: 40px 0;
    /* 위아래 여백 조절 가능 */
}

/*********************************************************************/

/* 🔝 스크롤 탑 버튼 기본 스타일 */
.scroll-top-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;

    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;

    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
    color: #111;
    font-size: 28px;
    font-weight: 600;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;

    transition: opacity .35s ease, transform .35s ease;
    z-index: 5000;
}

/* 🔥 보일 때 (스크롤 내려 올 경우) */
.scroll-top-btn.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ✨ 호버 효과 (PC에서) */
.scroll-top-btn:hover {
    background: rgba(255, 255, 255, 0.45);
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

/********************************************************/

/* 🔥 중앙 정렬 + 굵은 타이포 */
.bottom_title {
    width: 100%;
    text-align: center;
    margin: 40px 0;
    overflow: visible;

}

/* 🔥 텍스트 내부에 이미지가 채워지고 움직임 */
.bottom_title h1 {
    position: relative;
    display: inline-block;
    font-family: 'Inter', 'Pretendard', sans-serif;
    font-weight: 900;
    font-size: clamp(2.2rem, 6vw, 12rem);
    letter-spacing: -0.5px;
    /* 🔥 행간을 절반 수준으로 */
    line-height: 0.9;


    /* 핵심 이미지 */
    background-image: url("./bottom_title_bg.png");
    background-size: cover;
    background-position: 0 50%;
    background-repeat: repeat;

    /* 텍스트를 배경 마스크로 사용하도록 만드는 핵심 3줄 */
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* ⭐ 반드시 필요 */
    -webkit-background-clip: text;
    /* ⭐ 반드시 필요 */
    background-clip: text;

}

.strip-overlay-zero {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 1000;
}

.zero,
.zero_sub {
    text-align: center;
    /* 텍스트 중앙 정렬 */
    width: 100%;
    /* 영역 전체 사용 */
    display: block;
    /* 가운데 정렬 안정화 */
}

.zero {
    font-size: clamp(2.5rem, 6vw, 6rem);
    /* 큰 타이틀 */
    font-weight: 900;
    text-align: center;
    margin: 0;
}



.zero_sub {
    font-size: clamp(1rem, 2vw, 1.4rem);
    /* 설명 문장용 작은 폰트 */
    font-weight: 400;
    text-align: center;
    margin-top: 12px;
    line-height: 1.5;
}

.block-motion .text {
    color: #a4a4a4;
}

/*******************************************/

/* 기본 버튼 스타일 */
.toggle-btn {
  display: block;        /* 반드시 block 요소로 */
  padding: 12px 20px;
  background: #111;
  color: #ff8400;
  border: 2px solid #818181;
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
  border-radius: 30px;
  margin: 20px auto;
  transition: background 0.25s ease, transform 0.2s ease;
  text-align: center;    /* 버튼 텍스트도 가운데 */
}

.toggle-btn:hover {
  background: #ff8400;
  border: 2px solid #ffff00;
  color: #000000;
  transform: translateY(-2px);
}

/* 닫기 버튼은 가운데 정렬 */
.close-bottom-btn {
  display: block;
  margin: 20px auto 0 auto;
}

/* 아코디언 기본 숨김 */
.accordion-wrap {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s ease, opacity 0.35s ease;
}

/* 펼쳐진 상태 */
/* 펼쳐진 상태 */
.accordion-wrap.open {
  position: relative;

  /* 🌈 파스텔톤 그라데이션 4색 */
  background: linear-gradient(
      135deg,
      #f4e8ff,
      #e6f5ff,
      #e8fff4,
      #fff2e8
  );

  background-size: 400% 400%;
  animation: pastelRotate 18s ease-in-out infinite;

  padding: 40px 0;
  border-radius: 12px;
  z-index: 1;
  max-height: 15000px;
  opacity: 1;
}




/* 🔄 파스텔톤 부드러운 회전 */
@keyframes pastelRotate {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 0%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}