/* responsive.css */

/* 기본 이미지 반응형 스타일 */
img {
    max-width: 100%;
    height: auto;
    display: block; /* 이미지 하단 공백 제거 */
}

/* 컨테이너 반응형 설정 */
.container {
    width: 100%;
    max-width: 1200px; /* 데스크톱 최대 너비 */
    margin: 0 auto;    /* 가운데 정렬 */
    padding: 0 15px;   /* 좌우 여백 추가 */
}

/* 반응형 텍스트 크기 */
h1, h2, h3, h4, h5, h6, p {
    font-size: 1rem;
}

@media (min-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.75rem;
    }
    h3 {
        font-size: 1.5rem;
    }
}

/* 그리드 및 레이아웃 조정 */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 항목 간 간격 */
}

.col {
    flex: 1 1 calc(100% - 20px); /* 모바일: 전체 너비 */
}

@media (min-width: 768px) {
    .col {
        flex: 1 1 calc(50% - 20px); /* 태블릿: 2열 */
    }
}

@media (min-width: 1024px) {
    .col {
        flex: 1 1 calc(33.333% - 20px); /* 데스크톱: 3열 */
    }
}

/* 반응형 메뉴 스타일 */
.nav {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.nav-item {
    margin: 0 10px;
}

@media (max-width: 768px) {
    .nav {
        flex-direction: column;
    }
    .nav-item {
        margin: 10px 0;
    }
}

/* 미디어 쿼리로 반응형 조정 */
body {
    font-size: 16px;
    
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
}

/* 반응형 버튼 스타일 */
button {
    padding: 10px 20px;
    font-size: 1rem;
}

@media (max-width: 768px) {
    button {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

/* 반응형 테이블 스타일 */
.table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

/* 헤더 메뉴 기본 스타일 */
.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* 웹 해상도: 로고 크기 조정 */
@media (min-width: 769px) {
    .header-logo img {
        height: 50px; /* 로고 높이 */
        max-width: 200px; /* 로고 가로 크기 제한 */
    }
}

/* 삼선 버튼이 활성화되는 화면 크기에서 로고 숨기기 */
@media (max-width: 991px) {
    .header-logo img {
        display: none; /* 로고 숨기기 */
    }
}

@media (max-width: 768px) {
    /* 로고 숨기기 */
    .header-logo {
        display: none;
    }

    /* 헤더 메뉴 중앙 정렬 */
    .header-row {
        justify-content: center;
    }

    .header-nav-main {
        justify-content: center;
        text-align: center;
    }

    .header-nav-main .nav {
        justify-content: center;
    }
}

/* Home */
/* HOME 배너 컨테이너 */
#home .banner-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

#home .banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 텍스트 이미지 */
#home .text-image {
    position: absolute;
    top: 30%; /* 배너 높이의 30% */
    left: 10%;
    transform: translateY(-50%);
    max-width: 40%;
    height: auto;
}

/* 캐릭터 이미지 */
#home .character-image {
    position: absolute;
    top: 66%;
    left: 70%;
    transform: translate(-50%, -50%);
    max-width: 35%;
    height: auto;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    #home .banner-container {
        height: auto;
    }
    #home .text-image {
        top: 5%;
        left: 50%;
        transform: translate(-50%, 0);
        max-width: 60%;
    }
    #home .character-image {
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 50%;
    }
}

/* 배경 이미지 컨테이너 */
#home .image-container {
    position: relative; /* 라인의 부모 컨테이너 기준으로 위치 설정 */
    width: 100%;
    height: auto;
    overflow: hidden; /* 초과 요소 숨김 */
}

/* 공통 이미지 스타일 */
/* Owl Carousel 이미지 기본 스타일 */
#home .owl-carousel img {
    width: auto;
    max-width: 100%; /* 컨테이너 너비에 맞게 */
    height: auto;
    max-height: 400px; /* 웹에서 이미지 크기 확대 */
    object-fit: contain;
    margin: 0 auto;
}

/* 배경 이미지 스타일 */
#home .background-image {
    width: 100%;
    height: auto;
    object-fit: cover; /* 배경을 비율 유지하며 채움 */
}

/* 라인 컨테이너 */
#home .line-container {
    position: absolute;
    width: 100%;
    z-index: 10;
}

#home .line-top {
    top: 45%; /* 기본 위치 */
}

#home .line-bottom {
    top: 65%; /* 기본 위치 */
}

/* 모바일 대응 */
@media (max-width: 768px) {
    #home .owl-carousel img {
        max-height: 120px; /* 모바일에서 이미지 크기 축소 */
    }

    #home .line-top {
        top: 35%; /* 첫 번째 라인 위쪽으로 조정 */
    }

    #home .line-bottom {
        top: 60%; /* 두 번째 라인 위쪽으로 조정 */
    }
    
}

/* #tokenplan 스타일 */

/* 헤더 이미지 스타일 */
#tokenplan .image-header img {
    width: 100%;
    height: auto;
}

/* 배경 이미지 컨테이너 */
#tokenplan {
    position: relative;
    overflow: hidden;
    background: #fffbf2; /* 배경 색상 */
    padding: 0;
    margin: 0;
}

/* 부모 컨테이너 */
#tokenplan .overlay-images {
    position: relative;
    min-height: 600px; /* 기본 높이 */
    margin-top: 50px; /* 헤더 이미지 아래 간격 */
}

/* 이미지 스타일 */
#tokenplan .overlay-image {
    max-width: 27%;
    height: auto;
    object-fit: contain;
    margin: 0 50px;
    display: block;
    overflow: visible;
}

/* 하단 긴 이미지 스타일 */
#tokenplan .full-width {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    /* 배경 컨테이너 크기 확장 */
    #tokenplan {
        min-height: 1770px; /* 하단 간격 확보 */
        background: #fffbf2; /* 기존 배경 유지 */
    }

    /* 첫 번째 줄 왼쪽 이미지 숨김 */
    #tokenplan .overlay-images .d-flex:nth-child(1) img:first-child {
        display: none;
    }

    /* 콘텐츠 영역 */
    #tokenplan .overlay-images {
        
        flex-direction: column; /* 세로 정렬 */
        overflow: visible; /* 내용이 잘리지 않도록 설정 */
    }

    /* 세로 정렬된 이미지 간 간격 */
    #tokenplan .d-flex {
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px; /* 이미지 간 여백 */
    }

    /* 개별 이미지 스타일 */
    #tokenplan .overlay-image {
        max-width: 80%;
        margin-bottom: 30px;
    }

    /* 마지막 긴 이미지 간격 확보 */
    #tokenplan .full-width {
        width: auto;
        max-width: 100%;
        margin-top: 30px;
        margin-bottom: 0px; /* 하단 섹션 간 간섭 방지 */
    }    
}

/* #business_plan 스타일 */
#business_plan {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* 배경 이미지 */
#business_plan .bp_responsive-background {
    display: block;
    width: 100%;
    height: auto;
}

/* Sub 이미지 스타일 */
#business_plan .bp_overlay-bpimage {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 3;
}

/* Sub 이미지 내부의 2개 이미지 정렬 */
#business_plan .bp_overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    width: 90%; /* 부모 요소의 폭을 넓게 설정 */
    max-width: 1200px; /* 최대 크기 확대 */
    z-index: 4;
}

/* 왼쪽 이미지 */
#business_plan .bp_overlay-left-image {
    position: relative; /* 자식 요소 기준 설정 */
    width: 40%; /* 부모 요소의 40%로 설정 */
    max-width: 600px; /* 최대 크기 설정 */
    height: auto; /* 비율 유지 */
    display: block;
    margin: 0 auto;
}

/* 오른쪽 이미지 */
#business_plan .bp_overlay-right-image {
    width: 50%; /* 부모 요소의 50% */
    max-width: 500px; /* 최대 크기 제한 */
    height: auto; /* 비율 유지 */
    display: block;
}


/* 병아리 아래 02번 이미지 섹션 */
#business_plan .bp_section-02 {
    position: absolute;
    top: 65%;
    left: 55%;
    transform: translate(-40%, -50%);
    z-index: 5;
}

/* 병아리 아래 이미지 스타일 */
#business_plan .bp_image-02 {
    width: 100%;
    height: auto;
}

/* 카드 이미지를 포함하는 컨테이너 */
#business_plan .bp_moving-images {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

/* 내부 카드 이미지 애니메이션 */
#business_plan .bp_moving-wrapper {
    display: flex;
    gap: 30px;
    animation: move-left 10s linear infinite; /* 좌측으로 무한 이동 */
}

/* 각각의 카드 이미지 스타일 */
#business_plan .bp_card {
    width: 260px;
    height: auto;
    /*transition: transform 0.3s ease;*/
    flex-shrink: 0; /* 이미지 크기 고정 */

}

#business_plan .bp_card:hover {
    transform: scale(1.2); /* 마우스 오버 시 확대 */
}

/* 좌측으로 이동 애니메이션 */
@keyframes move-left {
    from {
        transform: translateX(0); /* 시작 위치 */
    }
    to {
        transform: translateX(-200%); /* 끝 위치 */
    }
}

/* 숫자 오버레이 */
#business_plan .bp_overlay-left-image .number-overlay {
    position: absolute; /* 부모 요소 기준으로 위치 */
    top: calc(50% + 20px); /* 세로 중앙에서 20px 아래로 이동 */
    left: calc(50% - 130px); /* 가로 중앙에서 100px 왼쪽으로 이동 */
    transform: translate(-50%, -50%); /* 위치 보정 */
    font-size: 1.5rem; /* 숫자 크기 */
    font-weight: bold; /* 두께 */
    color: #fff; /* 글자 색상 */
    /*background: rgba(0, 0, 0, 0.6); /* 반투명 배경 */
    padding: 10px 20px; /* 내부 여백 */
    border-radius: 8px; /* 둥근 모서리 */
    z-index: 5; /* 다른 요소 위에 표시 */
}

/* 모바일 대응 */
@media screen and (max-width: 768px) {
    /* 배경 이미지 */
    #business_plan .bp_responsive-background {
        object-fit: cover;
    }

    /* Sub 이미지 */
    #business_plan .bp_overlay-bpimage {
        object-fit: cover;
        width: 100%;
        height: auto;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Sub 이미지 내부의 2개 이미지 */
    #business_plan .bp_overlay-content {
        flex-direction: column;
        gap: 20px; /* 이미지 간격 감소 */
        top: 70%; /* 기존 70%에서 80%로 내려서 더 아래로 조정 */
    }

    #business_plan .bp_overlay-left-image {
        margin-top: -20px; /* 추가적으로 위로 이동 */
        width: 50% !important; /* 부모 요소의 50% */
        max-width: 800px !important; /* 최대 크기 설정 */
        height: auto !important; /* 비율 유지 */
    }

    #business_plan .bp_overlay-right-image {
        width: 50%; /* 크기 조정 */
    }

    /* 병아리 아래 이미지 */
    #business_plan .bp_section-02 {
        top: 70%; /* 위치 조정 */
    }

    /* 카드 이미지 숨김 */
    #business_plan .bp_moving-images {
        display: none; /* 모바일에서 숨김 */
    }

    #business_plan .bp_overlay-left-image .number-overlay {
        top: calc(50% + 8px); /* 작은 화면에서 10px 아래로 */
        left: calc(50% - 55px); /* 작은 화면에서 50px 왼쪽으로 */
        font-size: 0.7rem; /* 숫자 크기 감소 */
    }
}


/* #p2egame 스타일 */
#p2egame {
    position: relative; /* 내부 요소의 위치를 상대적으로 설정 */
    width: 100%; /* 가로 크기 100% */
    height: auto; /* 배경 이미지에 따라 높이 조정 */
}

/* #p2egame 배경 이미지 스타일 */
#p2egame .p2e_responsive-background {
    display: block;
    width: 100%;
    height: auto; /* 비율 유지 */
    z-index: 1; /* 배경 이미지는 낮은 z-index */
}

/* #p2egame 오버레이 이미지 스타일 */
#p2egame .p2ecenter-image {
    position: absolute; /* 배경 위에 겹치도록 설정 */
    top: 10%; /* 배경 이미지 상단에서 10% 아래로 배치 */
    left: 50%; /* 가로 중앙 정렬 */
    transform: translate(-50%, 0); /* 가로 중앙 보정 */
    z-index: 2; /* 배경 이미지 위로 표시 */
    width: 40%; /* 이미지 크기 조정 */
    height: auto; /* 비율 유지 */
}

/* #p2egame YouTube 비디오와 텍스트 오버레이 */
#p2egame .youtube-overlay {
    position: absolute;
    top: 55%; /* 배경 상단에서 55% 아래 */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    text-align: center; /* 텍스트 중앙 정렬 */
    width: 80%; /* YouTube iframe과 동일한 너비 */
    max-width: 900px; /* 최대 너비 */
}

/* #p2egame YouTube iframe 스타일 */
#p2egame .youtube-overlay iframe {
    width: 100%;
    height: 400px;
}

/* #p2egame 텍스트 스타일 */
#p2egame .youtube-overlay .youtube-text {
    margin-top: 10px; /* 비디오와 텍스트 간격 */
    font-size: 16px;
    color: #333; /* 텍스트 색상 */
    line-height: 1.5;
}

/* #p2egame 두 개의 이미지 오버레이 컨테이너 */
#p2egame .image-pair-overlay {
    position: absolute; /* 배경 이미지 안에 위치 */
    bottom: 10%; /* 배경 이미지 하단에서 위로 10% */
    left: 50%; /* 가로 중앙 정렬 */
    transform: translate(-50%, 0); /* 가로 중앙 보정 */
    display: flex; /* 이미지 수평 정렬 */
    justify-content: space-between; /* 이미지 간 간격 조정 */
    align-items: center; /* 세로 정렬 */
    width: 80%; /* 전체 컨테이너 너비 */
    gap: 20px; /* 이미지 간 간격 */
    z-index: 4; /* YouTube 비디오 위에 표시 */
}

.pair-image {
    width: 30%; /* 각 이미지의 폭을 부모 컨테이너의 30%로 설정 */
    max-width: 300px; /* 최대 크기 제한 */
    height: auto; /* 비율 유지 */
}


/* #p2egame 각각의 이미지 스타일 */
#p2egame .image-pair-overlay .pair-image {
    flex: 1; /* 이미지가 Flex 컨테이너의 공간을 균등하게 차지 */
    max-width: 400px; /* 최대 크기 제한 */
    height: auto; /* 비율 유지 */
}

/* 모바일 버전 (화면 너비 768px 이하) */
@media screen and (max-width: 768px) {
    /* #p2egame 배경 이미지 */
    #p2egame .p2e_responsive-background {
        width: 100%; /* 가로 크기를 화면에 맞춤 */
        height: 100vh; /* 화면 높이 전체를 채워 원래 길이 유지 */
        object-fit: cover; /* 원본 비율 유지하며 화면 채우기 */
    }

    /* #p2egame 오버레이 이미지 */
    #p2egame .p2ecenter-image {
        width: 60%; /* 크기 축소 */
        top: 10%; /* 더 아래로 이동 */
    }

    /* #p2egame YouTube 비디오 */
    #p2egame .youtube-overlay {
        width: 90%; /* 비디오 크기 조정 */
        max-width: none; /* 최대 너비 제한 해제 */
        top: 50%; /* 훨씬 더 아래로 이동 */
        transform: translate(-50%, -50%);
    }

    #p2egame .youtube-overlay iframe {
        height: 250px; /* 비디오 높이 유지 */
    }

    /* #p2egame 두 개의 이미지 오버레이 컨테이너 */
    #p2egame .image-pair-overlay {
        gap: 10px; /* 간격 축소 */
        width: 100%; /* 부모 요소 너비 */
        max-width: none; /* 최대 너비 제한 해제 */
        padding: 0 20px; /* 양쪽 여백 추가 */
    }

    /* #p2egame 각각의 이미지 */
    #p2egame .image-pair-overlay .pair-image {
        flex: none; /* Flex 비율 해제 */
        width: 45%; /* 각 이미지 크기 조정 */
        max-width: none; /* 크기 제한 해제 */
    }
}

/* Roadmap 섹션 스타일 */
#roadmap {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
  }
  
  /* 배경 이미지 스타일 */
  .roadmap-background {
    display: block;
    width: 100%;
    height: auto;
  }
  
  /* 토글 버튼 및 내용 래퍼 */
  .toggle-wrapper {
    position: absolute;
    top: 45%;
    left: 60%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  /* 버튼 스타일 */
  #toggleButton {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  
  #toggleButton img {
    width: 300px;
    max-width: 100%;
    height: auto;
  }
  
  /* 숨겨진 내용 스타일 */
  #hiddenContent {
    margin-top: 20px;
    font-size: 1.8rem;
    color: #333;
    text-align: left;
    font-weight: bold;
    width: 600px;
    max-width: 90%;
    background: white;
    padding: 20px;
    border: 2px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none; /* 처음에는 보이지 않음 */
  }
  

/************  News  ***********/

#news {
    position: relative;
    width: 100%;
    overflow: hidden; /* 초과 부분 숨김 */
    background-color: black !important; /* 🔥 배경색을 빨간색으로 변경 */

}

#news .news-background {
    width: 100%;
    height: auto;
    display: block;
}

#news img {
    max-width: 100%;
    height: auto;
}

/* #news 추가 콘텐츠 */
#news .container-fluid .row {
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: space-around; /* 좌우 균등 분배 */
}

#news .code-block {
    white-space: pre-wrap; /* 코드 줄 바꿈 */
    font-family: monospace; /* 코드 폰트 */
    font-size: 14px;
    overflow-x: auto; /* 코드 길어질 경우 스크롤 */
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* 뉴스 캐러셀 */
#news .owl-carousel .owl-stage {
    display: flex;
    align-items: center;
}

.news .owl-item img {
    max-width: 100%; /* 이미지 크기를 줄임 */
    height: auto; /* 비율 유지 */
    margin: 0 auto; /* 중앙 정렬 */
}

#news .owl-carousel .my-5 {
    margin: 25px;
    text-align: center;
}

@media (max-width: 768px) {
    /* 모바일에서 뉴스 섹션만 위로 이동 */
    #news .owl-carousel {
        margin-top: -150px; /* 뉴스 이미지 섹션만 위로 100px 이동 */
    }

    #news .owl-carousel img {
        max-width: 60%; /* 기본 이미지 크기 제한 */
        height: auto; /* 비율 유지 */
        margin: 0 auto; /* 중앙 정렬 */
    }

    #news .owl-carousel .owl-item {
        margin: 10px;
    }

    #news {
        height: auto; /* 섹션 자체 높이는 이미지의 원래 높이에 따라 */
    }

    #news img {
        width: auto; /* 너비를 조정하지 않음 */
        height: 100%; /* 높이를 항상 부모 요소 높이에 맞춤 */
        max-height: none; /* 기본 max-height 제한 해제 */
        object-fit: cover; /* 높이를 유지하며 좌우를 잘라냄 */
    }

    #news .news-background {
        
        width: 100%; /* 컨테이너의 너비를 채움 */
        height: 100vh; /* 화면 전체 높이에 맞춤 */
        object-fit: cover; /* 이미지 비율을 유지하면서 넘치는 부분 자름 */
        object-position: center; /* 이미지의 중앙을 기준으로 자름 */
    }

    /* 뉴스 슬라이더 이미지 크기 축소 */
    .news-carousel .owl-item img {
        max-width: 80%; /* 이미지 크기를 80%로 줄임 */
        margin: 0 auto; /* 중앙 정렬 */
    }

    /* 캐러셀 아이템 간격 축소 */
    .news-carousel .owl-item {
        margin: 5px; /* 간격 줄이기 */
    }

    /* 뉴스 섹션 자체 높이 축소 */
    .news-carousel {
        margin-top: -10px; /* 섹션 위아래 여백 조정 */
    }
    
}

/* FAQ 이미지 크기 조정 */
.custom-left-image {
    max-width: 35%;
    height: auto;
    display: block;
    margin-bottom: 1rem;
    margin-right: 15px;
}

/* FAQ 제목 스타일 */
.custom-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

/* FAQ 섹션 레이아웃 */
#custom-section {
    position: absolute; /* 배경 이미지 기준으로 위치 */
    top: 50%; /* 배경 이미지 안에서 위쪽으로 이동 */
    left: 50%; /* 수평 중앙 정렬 */
    transform: translateX(-50%); /* 수평 중앙 정렬 보정 */
    display: flex; /* Flexbox 배치 */
    flex-wrap: nowrap; /* 줄바꿈 방지 */
    justify-content: space-between; /* 좌우 배치 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 20px; /* 요소 간 간격 */
    z-index: 10; /* 배경 위로 표시 */
    width: 100%; /* 부모 너비에 맞춤 */
    max-width: 1200px; /* 최대 너비 제한 */
    height: auto; /* 내용에 맞게 높이 조정 */
    overflow: hidden; /* 배경 밖으로 나가지 않도록 설정 */
    padding: 2rem;
}

/* FAQ 섹션 배경 이미지 */
#custom-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* FAQ 섹션 높이에 맞춤 */
    background-image: url("img/newh/news_bg.png");
    background-size: cover; /* 이미지 비율 유지 */
    background-position: center; /* 중앙 정렬 */
    z-index: -1; /* 콘텐츠 뒤로 배치 */
}

/* FAQ 섹션 - 왼쪽 이미지 */
#custom-section .custom-left {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* 배경 위로 표시 */
}

/* FAQ 섹션 - 오른쪽 FAQ */
#custom-section .custom-right {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    z-index: 1; /* 배경 위로 표시 */
}

/* 반응형 레이아웃 */
@media (max-width: 768px) {
    #custom-section {
        top: 34%; /* 모바일에서 위쪽으로 이동 */
        flex-direction: column; /* 세로 배치 */
        justify-content: center; /* 세로 중앙 정렬 */
        align-items: center; /* 가로 중앙 정렬 */
        height: auto; /* 높이를 내용에 맞춤 */
        padding: 1.5rem;
    }

    #custom-section .custom-left {
        display: none; /* 모바일에서 왼쪽 이미지를 숨김 */
    }

    #custom-section .custom-right {
        order: 1; /* FAQ만 보이도록 순서 조정 */
        text-align: center;
        align-items: center;
        flex: 1 1 auto; /* 크기 자동 조정 */
        max-width: 90%; /* FAQ 최대 너비 제한 */
    }

    .custom-title {
        font-size: 1.2rem; /* 제목 크기를 더 작게 설정 */
    }

     /* FAQ 버튼 텍스트 */
     .accordion-button {
        font-size: 0.8rem; /* FAQ 버튼 글씨 크기 축소 */
        padding: 0.5rem; /* 버튼 내부 여백 축소 */
    }

    /* FAQ 내용 텍스트 */
    .accordion-body {
        font-size: 0.7rem; /* FAQ 내용 글씨 크기 축소 */
        line-height: 1.2; /* 줄 간격 축소 */
        padding: 0.5rem; /* 내용 내부 여백 축소 */
    }

    /* FAQ 항목 간 간격 축소 */
    .accordion-item {
        margin-bottom: 0.5rem; /* FAQ 항목 간 간격 축소 */
    }
}

/* 하단 섹션 */
#footer-section {
    position: relative;
    top: -300px; /* 🔥 위로 50px 이동 */
    bottom: 100px; /* 하단에 고정 */
    left: 50%; /* 수평 중앙 정렬 */
    transform: translateX(-50%); /* 중앙 정렬 보정 */
    display: flex; /* Flexbox로 레이아웃 설정 */
    flex-wrap: wrap; /* 줄바꿈 가능 */
    justify-content: space-between; /* 좌우 요소 간격 균형 */
    align-items: center; /* 세로 중앙 정렬 */
    width: 100%; /* 부모 너비에 맞춤 */
    padding: 1rem; /* 내부 여백 */
    z-index: 10; /* 배경 이미지 위로 표시 */
}

/* 로고 및 SNS 아이콘 */
#footer-section .logo-sns {
    display: flex;
    flex-direction: column; /* 세로 배치 */
    align-items: center; /* 가로 중앙 정렬 */
    gap: 1rem; /* 요소 간 간격 */
    flex: 1; /* Flex 비율 */
}

#footer-section .logo-sns img.logo {
    max-width: 30%; /* 로고 크기 제한 */
    height: auto; /* 비율 유지 */
}

/* 백서 섹션 */
#footer-section .white-paper {
    display: flex;
    flex-direction: column; /* 세로 배치 */
    align-items: center; /* 가로 중앙 정렬 */
    flex: 1; /* Flex 비율 */
    text-align: center; /* 텍스트 중앙 정렬 */
    gap: 1rem; /* 요소 간 간격 */
}

#footer-section .white-paper p.title {
    font-size: 2rem; /* 제목 크기 */
    color: white; /* 텍스트 색상 */
    font-weight: 800; /* 텍스트 굵기 */
}

#footer-section .white-paper p a {
    color: white; /* 링크 색상 */
    text-decoration: none; /* 밑줄 제거 */
    font-size: 1.2rem; /* 링크 텍스트 크기 */
    display: flex;
    align-items: center; /* 아이콘과 텍스트 정렬 */
    gap: 0.5rem; /* 아이콘과 텍스트 간격 */
}

#footer-section .white-paper p a img {
    width: 24px; /* 아이콘 크기 */
    height: 24px;
}

#footer {
    padding-top: 10px;
    margin-top: -200px !important;
}

@media (max-width: 768px) {
    /* 📌 footer-section 수정 (SNS 아래 White Paper 표시) */
    #footer-section {        
        position: relative;
        top: -190px; /* 🚀 위로 올리기 */
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important; /* 🎯 SNS 아래에 White Paper 배치 */
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        z-index: 999 !important;
        padding-top: 20px !important;
    }

    /* 📌 SNS 아이콘 */
    #footer-section .logo-sns {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 20px !important; /* 🎯 SNS 아래 여백 */
    }


    /* 📌 셀렉트 박스 스타일 */
    #language-select {
        width: 100% !important;
        max-width: 250px !important;
        padding: 10px !important;
        font-size: 14px !important;
        border: 1px solid #ccc !important;
        border-radius: 5px !important;
        text-align: center !important;
        margin-bottom: 10px !important; /* 버튼과의 간격 추가 */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1002 !important;
    }

    /* 📌 다운로드 버튼 스타일 */
    #download-btn {
        width: 100% !important;
        max-width: 250px !important;
        padding: 10px 15px !important;
        font-size: 14px !important;
        background-color: #007bff !important;
        color: white !important;
        border: none !important;
        border-radius: 5px !important;
        cursor: pointer !important;
        text-align: center !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1002 !important;
    }

    #download-btn:hover {
        background-color: #0056b3 !important;
    }

    .white-paper .download-section img {
        display: none !important; /* 🚀 모바일에서 foot_logo 숨기기 */
    }

    .white-paper .download-section {
        display: none !important; /* ✅ 모바일에서 foot_logo 부모 영역까지 숨기기 */
    }

    .white-paper {
        display: none !important; /* ✅ 모바일에서 완전히 제거 */
    }

    #footer {
        padding-top: 10px;
        margin-top: -200px !important;
    }
}