/* 모달 크기 설정 - 로그인 버튼 기준 */
#loginModal {
    max-width: 240px; /* 로그인 버튼(200px)의 1.2배 */
    margin: 0 auto;
}

/* 모달 타이틀 스타일링 */
#loginModal .card-header {
    text-align: center;
    padding: 8px 10px;
}

#loginModal .card-title {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 500;
}

/* 모바일 환경 대응 */
@media (max-width: 480px) {
    #loginModal {
        max-width: 240px; /* 모바일에서도 동일한 크기 유지 */
    }
    
    #loginModal .card-title {
        font-size: 1rem;
    }
}

/* 모달 내부 여백 축소 */
#loginModal .card-body {
    padding: 10px;
}

#loginModal .card-header,
#loginModal .card-footer {
    padding: 8px 10px;
}

/* 버튼 크기 축소 */
#loginModal .btn {
    padding: 5px 10px;
    font-size: 0.9rem;
}

/* 내부 간격 축소 */
#loginModal .gap-3 {
    gap: 0.5rem !important;
}

#loginModal .mb-2 {
    margin-bottom: 0.5rem !important;
}

#loginModal .py-3 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* 소셜 로그인 스타일 */
.social-login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 15px 0;
    width: 100%;
    margin: 0 auto;
}

.social-login-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 40px;
}

/* 네이버 로그인 버튼 */
.social-login-link.naver-login {
    background-color: rgb(3, 199, 90);
    overflow: hidden;
    border-radius: 4px;
}
.social-login-link.kakao-login {
    background-color: rgb(254, 229, 0);
    overflow: hidden;
    border-radius: 4px;
}
.social-login-link img {
    height: 40px;
    width: auto;
    transition: opacity 0.2s ease-in-out;
    /* 이미지 렌더링 품질 개선 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.social-login-link:hover img {
    opacity: 0.85;
}

@media (max-width: 480px) {
    .social-login-container {
        gap: 10px;
        padding: 10px 0;
    }
    
    .social-login-link {
        height: 38px;
        width: 200px; /* 모바일에서도 동일한 너비 유지 */
    }

    .social-login-link img {
        height: 38px;
    }
}

.contest-card .card-overlay {
    background: rgba(0,0,0,0.2) !important;
    transition: background 0.3s ease !important;
    z-index: 1 !important;
}
.contest-card a:hover .card-overlay {
    background: rgba(0,0,0,0.7) !important;
}
.contest-card .text-color-light {
    color: #fff !important;
}

/* Footer 텍스트 색상 - 기존 흰색 스타일 덮어쓰기 */
footer h4.ls-0 {
    color: #e0e1e5 !important; /* custom-text-color-light-2와 동일한 색상 */
}

footer .text-content {
    color: #bfbfbf !important; /* custom-text-color-light-3와 동일한 색상 */
}

footer a:not(.btn) {
    color: #bfbfbf !important;
}

footer a:not(.btn):hover {
    color: #e0e1e5 !important;
}

footer p {
    color: #bfbfbf !important;
}

.map-container {
    margin: 2rem 0;
    border-radius: 8px;
    overflow: hidden;
}
.map-container iframe {
    width: 100%;
    height: 450px;
    border: none;
}

/* 메인 히어로 섹션 반응형 스타일 */
.custom-section-svg {
    width: 100% !important;
    overflow: hidden !important;
}

.custom-section-svg svg,
.hero-svg,
svg[width="1820"],
.custom-section-svg svg[width] {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* 메인 페이지 - 높이 840px (자동 조정) */
.main .custom-section-svg svg,
.custom-section-svg svg[height="840"] {
    height: auto !important;
    min-height: 400px;
}

/* 서브 페이지 - 높이 420px 고정 */
.custom-section-svg svg[height="420"] {
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
}

/* 태블릿 사이즈 */
@media (max-width: 992px) {
    .hero-svg {
        min-height: 350px;
    }
}

/* 모바일 사이즈 */
@media (max-width: 768px) {
    .hero-svg {
        min-height: 300px;
    }
    
    /* 모바일에서 텍스트 크기 조정 */
    .custom-section-svg .text-6 {
        font-size: 1.5rem !important;
    }
    
    .custom-section-svg .text-lg-10 {
        font-size: 1.8rem !important;
    }
    
    .custom-section-svg .text-xl-14 {
        font-size: 2rem !important;
    }
    
    /* 모바일에서 여백 조정 */
    .custom-section-svg .pe-5 {
        padding-right: 1rem !important;
    }
}

/* 작은 모바일 사이즈 */
@media (max-width: 480px) {
    .hero-svg {
        min-height: 250px;
    }
    
    .custom-section-svg .text-6 {
        font-size: 1.2rem !important;
    }
    
    .custom-section-svg .text-lg-10 {
        font-size: 1.5rem !important;
    }
    
    .custom-section-svg .text-xl-14 {
        font-size: 1.7rem !important;
    }
}

/* 가로 스크롤 방지를 위한 강력한 CSS - 우선순위 최고 */
body {
    overflow-x: hidden !important;
}

.custom-section-svg {
    width: 100% !important;
    overflow: hidden !important;
    max-width: 100vw !important;
}

.custom-section-svg svg,
.hero-svg,
svg[width="1820"],
.custom-section-svg svg[width] {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* 모든 미디어 쿼리에서 SVG 너비 강제 조정 */
@media (max-width: 1200px) {
    .custom-section-svg svg {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

@media (max-width: 992px) {
    .custom-section-svg svg {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

@media (max-width: 768px) {
    .custom-section-svg svg {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

@media (max-width: 480px) {
    .custom-section-svg svg {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* 서브 페이지에서 420px 높이 강제 적용 - 최종 우선순위 */
.custom-section-svg svg[height="420"],
svg[height="420"].hero-svg {
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
}

/* 메인 페이지에서만 자동 높이 적용 */
.main .custom-section-svg svg[height="840"],
.main svg[height="840"].hero-svg {
    height: auto !important;
    min-height: 400px !important;
    max-height: none !important;
}