html, body {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.header {

    /*position: relative; !* 자식 요소를 기준으로 할 수 있도록 position을 설정 *!*/
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black; /* 배경색 설정 */
    opacity: 0.4; /* 배경에만 투명도 적용 */
    z-index: -1; /* 내용물 뒤에 배치 */
    pointer-events: none; /* 가상 요소가 클릭 이벤트를 차단하지 않도록 설정 */
}

.header-logo {
    width: 9rem;
}

.blur-background {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/images/blur_background.jpg') no-repeat center center;
    background-size: cover;
    z-index: -1;
}

.logo-background {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0; /* 내용물보다 뒤에 위치시키기 위한 설정 */
}

.logo-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/images/bg-1.png') no-repeat center center;
    background-size: cover;
    opacity: 0.1; /* 배경 이미지에만 투명도 적용 */
    z-index: -1; /* 이미지가 부모의 내용물 뒤로 가도록 설정 */
}

.bg-yellow {
    background: rgb(253, 218, 2);
}

/*.logo-background {*/
/*    position: relative;*/
/*    width: 100vw;*/
/*    height: 100vh;*/
/*    z-index: 0; !* 내용물보다 뒤에 위치시키기 위한 설정 *!*/
/*    overflow: hidden; !* 가상 요소가 부모 컨테이너를 벗어나지 않도록 설정 *!*/
/*}*/

/*.logo-background::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100vw;*/
/*    height: 100vh;*/
/*    background: url('/images/bg-1.png') no-repeat center center;*/
/*    background-size: cover;*/
/*    opacity: 0.1; !* 백그라운드 이미지에만 투명도 적용 *!*/
/*    z-index: -1; !* 이미지가 부모의 내용물 뒤로 가도록 설정 *!*/
/*}*/


.container-center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns */
    gap: 10px;
    width: fit-content;
}

.image-grid img {
    width: 140px; /* 고정된 너비 */
    height: 140px; /* 고정된 높이 */
    object-fit: cover; /* 이미지가 영역에 맞게 조정, 잘릴 수 있음 */
    /*border-radius: 10px; !* 이미지에 약간의 둥근 모서리 추가 (선택 사항) *!*/
}

.image-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
}

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


.image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15); /* 반투명한 검정색 오버레이 */
    z-index: 1; /* 텍스트보다 뒤에 표시되도록 */
}

.image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 글자에 그림자 추가 */
    pointer-events: none; /* 텍스트가 클릭 이벤트를 차단하지 않도록 */
}

.region-btn {
    flex: 1;
    text-align: center;
    white-space: nowrap;
}

.region-btn-container {
    display: flex;
    width: 800px;
}


@media (min-width: 576px) {
    .header-logo {
        width: 9rem;
    }
}

@media (min-width: 768px) {
    .header-logo {
        width: 9rem;
    }
}

@media (min-width: 1200px) {
    .header-logo {
        width: 11rem;
    }

}

@media (min-width: 1400px) {
    .header-logo {
        width: 11rem;
    }

}

.store-download{
 height: 10vh;
}
.kakao-login{
    height: 7.5vh;
    cursor: pointer;
}


/* 기본 폰트 크기 설정 (PC) */
.font-xxxl {
    font-size: 100px;
}

.font-xxl {
    font-size: 70px;
}

.font-xl {
    font-size: 50px;
}

.font-l {
    font-size: 30px;
}

.font-m {
    font-size: 20px;
}

.font-s {
    font-size: 16px;
}

.font-xs {
    font-size: 12px;
}

.pc{
    display: block;
}
.ta{
   display: none;
}
.mo{
    display: none;
}
/* 태블릿 크기 조정 */
@media (max-width: 1024px) {
    .font-xxxl {
        font-size: 80px;
    }

    .font-xxl {
        font-size: 60px;
    }

    .font-xl {
        font-size: 40px;
    }

    .font-l {
        font-size: 25px;
    }

    .font-m {
        font-size: 18px;
    }

    .font-s {
        font-size: 14px;
    }

    .font-xs {
        font-size: 10px;
    }

    .store-download{
        height: 10vh;
    }

    .region-btn-container {
        display: flex;
        width: 100%;
    }

    .image-grid {
        grid-template-columns: repeat(4, 1fr); /* 5 columns */
        gap: 5px;
    }

    .pc{
        display: none;
    }
    .ta{
        display: block;
    }
    .mo{
        display: none;
    }
}

/* 모바일 크기 조정 */
@media (max-width: 768px) {
    .font-xxxl {
        font-size: 60px;
    }

    .font-xxl {
        font-size: 50px;
    }

    .font-xl {
        font-size: 32px;
    }

    .font-l {
        font-size: 20px;
    }

    .font-m {
        font-size: 14px;
    }

    .font-s {
        font-size: 12px;
    }

    .font-xs {
        font-size: 8px;
    }

    .p-5 {
        padding: 2rem !important;
    }

    .pc{
        display: none;
    }
    .ta{
        display: none;
    }
    .mo{
        display: block;
    }

    .kakao-login{
        height: 5.5vh;
        cursor: pointer;
    }

    .store-download{
        height: 7vh;
    }

    .region-btn-container {
        display: flex;
        width: 100%;
    }


    .image-grid {
        grid-template-columns: repeat(3, 1fr); /* 5 columns */
        gap: 0;
    }

    .image-wrapper {
        position: relative;
        width: 120px;
        height: 120px;
    }
}