/* 기본 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    min-height: 100vh;
    background-color: #000;
}

/* 배경 설정 */
.main-container {
    width: 100%;
    min-height: 100vh;
    background-image: url('CR_BG_1920x1120.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    /* 1920px 미만에서는 화면에 꽉 차도록 설정 */
	background-size:cover;
    position: relative;
    display: flex;
    flex-direction: column; /* 세로 방향으로 요소 배치 */
    align-items: center;
}

/* 배경 조건: 화면이 세로로 더 길거나(portrait), 너비가 좁은데 높이가 1200px을 초과할 때 */
@media screen and (orientation: portrait), 
       screen and (max-width: 1200px) and (min-height: 1201px) {
    
    .main-container {
        background-image: url('BG_1536x2048.jpg');
        background-size: cover;
        background-position: center bottom;
    }

    /* 세로 모드 레이아웃: 로고와 타이틀을 상단(Top)으로 배치 */
    .center-content {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin-top: 80px !important; /* 상단 여백 */
        width: 100%;
        padding-bottom: 50px;
    }

    .head-title {
        font-size: 38pt;
        margin-top: 15px;
    }

    .sub-title {
        font-size: 24pt;
    }
}
/* 배경 조건 예외 처리: 1024x768 처럼 가로가 더 긴 경우 가로 이미지 강제 유지 */
@media screen and (min-width: 1024px) and (max-height: 800px) {
    .main-container {
        background-image: url('CR_BG_1920x1120.jpg');
        background-size: cover;
    }
    .center-content {
        /* 가로형일 때는 다시 기존 40% 위치로 복구 */
        margin-top: 40vh;
    }
}
@media (min-width: 1920px) and (max-width: 3000px) {
    .main-container {
        background-image: url('CR_BG_3840x2240.jpg');
    }
	.head-title {
		font-weight: 500 !important;
		font-size: 64pt !important;
	}
	.sub-title {
		font-weight: 600 !important;
		font-size: 40pt !important;
		line-height: 1.5 !important;
		letter-spacing: 5px !important;
	}
}
/* 초 고해상도 설정 */
@media (min-width: 3001px) and (max-width: 3840px){
    .main-container {
        background-image: url('BG_3840x1620.jpg');
        
		background-size: cover;
		
		background-position: center top;
		background-repeat: no-repeat;
        
        /* 2. 이미지의 실제 비율을 유지하면서 푸터 높이(100px)만큼 더함 */
        /* 1620/3840 = 0.4218 -> 42.18vw */
        height: calc(39.58vh + 100px);
        
        /* 3. 만약 이미지 비율상 높이가 화면보다 작을 경우를 대비해 최소 높이 설정 */
        min-height: calc(100vh + 100px);
        
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }
	
	.main-container {
        image-rendering: -webkit-optimize-contrast; /* 크롬, 사파리 선명도 최적화 */
    }

    .center-content {
        /* 첫 화면(100vh) 기준 중앙 배치를 유지 */
        margin-top: 35vh !important; 
    }

    footer {
        /* 2. 블랙 배경을 제거하고 투명하게 설정 */
        background: transparent; 
        
        /* 3. 푸터를 컨테이너 맨 바닥에 밀착 */
        margin-top: auto; 
        height: 100px;
        width: 100%;
        
        /* 가독성을 위해 텍스트 뒤에만 아주 연한 그라데이션 (선택 사항) */
        /* 이미지를 가리지 않으려면 아예 삭제해도 됩니다. */
        background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
    }

    .footer-container {
        /* 푸터 내부 블랙 박스 요소가 있다면 투명화 */
        background: transparent;
    }
	
	.sub-title {
		line-height: 1.8 !important;
		letter-spacing: 2.2px !important;
	}
}
@media (min-width: 3841px) {
	.main-container { 
		background-image: url('BG_3840x1620.jpg');
	}
}
/* 해상도가 1920px 이상일 때만 비율 유지 스크롤 모드 작동 */
@media (min-width: 1920px) and (max-width: 3000px) {
    .main-container {
        /* 너비를 100%로 고정하고 높이는 비율에 따라 자동 조절 (스크롤 발생) */
        /* background-size: 100% auto; */
		background-size: cover;
    }
    
    /* 화면 가로비가 이미지 비율보다 넓어질 때 높이를 강제 계산하여 이미지 보호 */
    @media (min-aspect-ratio: 1920/1120) {
        .main-container {
            height: 57.33vw; /* 1120 / 1920 = 0.5833 */
        }
    }
}

/* 중앙 컨텐츠 배치 (상하 40:60 비율 유지) */
.center-content {
    width: 100%;
    /* 상단에서 40% 지점에 로고가 위치하도록 마진 설정 */
    margin-top: 37vh; 
    text-align: center;
    z-index: 10;
    /* 푸터와 겹치지 않게 최소 하단 여백 부여 */
    padding-bottom: 50px; 
}

/* 로고와 타이틀 간격 */
.logo-box {
    /*margin-bottom: 2%;*/ /* 로고 아래 2% 간격 */
}

.main-logo {
    display: block;
    margin: 0 auto;
    max-width: 38%;
    height: auto;
}

/* 타이틀 스타일 */
.head-title {
    font-family: 'Cinzel', serif;
    font-style: normal;
    font-weight: 500;
    font-size: 52pt;
    line-height: 1.2;
    letter-spacing: 2px;

    /* 1. 수직 Gradient 적용 */
    background: linear-gradient(to bottom, #ddd 10%, #fff 50%, #bbb 62%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* 2. Out Glow (Black 82%, 65px) */
    /* drop-shadow(x y blur color) */
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1))
            drop-shadow(0 0 30px rgba(0, 0, 0, 1))
            drop-shadow(0 0 70px rgba(0, 0, 0, 0.8));
	/*text-shadow: 0px 0px 10px black, 0px 0px 20px black; 글자를 가려서 사용하지 않음*/
    
    /* 브라우저 호환성을 위한 처리 */
    display: inline-block; 
    width: 100%;
}

.sub-title {
    font-family: 'Cinzel', serif;
    font-style: normal;
    font-weight: 500; /* 통일감을 위해 추가 */
    font-size: 30pt;
    line-height: 1.2;
    letter-spacing: 2px;

    /* 1. 수직 Gradient 적용 */
    background: linear-gradient(to bottom, #ddd 10%, #fff 50%, #bbb 62%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* 2. Out Glow (Black 82%, 65px) */
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1))
            drop-shadow(0 0 30px rgba(0, 0, 0, 1))
            drop-shadow(0 0 70px rgba(0, 0, 0, 0.8));

    display: inline-block;
    width: 100%;
}

/* 푸터 스타일 */
footer {
    margin-top: auto; 
    width: 100%;
    /* 고정 높이 100px 대신 최소 높이로 설정하여 유연하게 대응 */
    min-height: 100px; 
    /* 그라데이션이 늘어난 높이만큼 꽉 차도록 설정 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 20;
    display: flex;
    flex-direction: column;
}

.footer-line {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* [기본: 모바일 - 모두 세로 정렬] */
.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    text-align: center;
	min-height: 100px; 
}

.footer-logos {
    display: flex;
    flex-direction: row; /* 로고끼리는 모바일에서도 가로 배치 권장 */
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-container .item {
	opacity: 0.5;
    color: #fff;
	font-size: 0;
    text-align: center;
}
.footer-container .copyright {
    opacity: 0.5;
    color: #fff;
    font-size: 13px;
    text-align: center;
}

/* 해상도 대응 (모바일) 단계 1*/
@media (max-width: 411px) {
	.footer-logos {
		gap: 8px;
	}
}
@media (min-width: 767px) {
    .footer-container {
        /* 기본 column 유지, 로고 그룹만 너비를 100% 써서 위로 올림 */
    }
    .footer-logos {
        width: 100%;
        margin-bottom: 5px;
    }
    .copyright {
        width: 100%;
    }
}
@media (max-width: 767px) {
	.main-logo {
		max-width: 70%;
	}
    .head-title { 
        font-size: 30pt; 
        letter-spacing: 1px;
    }
    .sub-title { 
        font-size: 20pt; 
        letter-spacing: 1px;
    }
    .center-content {
        margin-top: 25vh; /* 모바일에서 위로 조금 더 올림 */
    }
    
    .footer-container .copyright {
        font-size: 11px; /* 모바일 가독성을 위해 폰트 살짝 조정 */
        text-align: center;
        width: 100%;
    }
}
/* 해상도 대응 (모바일) 단계 2: 공간이 충분히 넓을 때 (예: 1200px 이상) - 전체 수평 배치 */
@media (min-width: 1200px) {
    .footer-container {
        flex-direction: row; /* 전체 가로 배치로 전환 */
        flex-wrap: nowrap;
        justify-content: center;
        gap: 40px; /* 로고그룹과 카피라이트 사이 간격 */
    }

    .footer-logos {
        width: auto; /* 필요한 만큼만 너비 차지 */
        margin-bottom: 0;
    }

    .copyright {
        width: auto;
        text-align: left;
    }
}
@media (min-width: 768px) and (max-width: 1200px) {
	.main-logo {
		max-width: 60%;
	}
	.head-title { 
        font-size: 40pt; 
        letter-spacing: 1.5px;
    }
    .sub-title { 
        font-size: 25pt; 
        letter-spacing: 1.5px;
    }
}
@media (min-width: 1201px) and (max-width: 1500px) {
	.main-logo {
		max-width: 53%;
	}
	.head-title { 
        font-size: 45pt; 
    }
    .sub-title { 
        font-size: 30pt; 
    }
}
@media (min-width: 768px) and (max-width: 1500px) {
    .center-content { 
        margin-top: 35vh; /* 중간 해상도에서 로고/타이틀 위치 최적화 */
    }
}
@media (min-width: 1501px) and (max-width: 1800px) {
	.main-logo {
		max-width: 47%;
	}
	.sub-title {
		line-height: 1.6;
	}
}
@media (min-width: 1801px) and (max-width: 2000px) {
	.main-logo {
		max-width: 40%;
	}
	.sub-title {
		line-height: 1.6;
	}
}
@media (min-width: 2200px) and (max-width: 3000px) {
	.main-logo {
		max-width: 35%;
	}
}
@media (min-width: 1500px) and (max-width: 3000px) {
	.main-logo {
		position: relative;
        top: 1%;
	}
	.sub-title {
		line-height: 1.7;
	}
	.copyright {
		margin-left: 35px;
	}
}
@media (min-width: 3001px) {
	.main-logo {
		max-width: 33%;
	}
	.copyright {
		margin-left: 35px;
	}
}
/* 수직 해상도가 2160px 이상일 때 푸터 스크롤 하단에 고정처리 */
@media (min-height: 1200px) and (max-width: 2560px) {
    /* 부모 컨테이너가 전체 화면을 꽉 채우도록 보장 */
    .main-container {
        height: 100vh;
        overflow: hidden; /* 필요 시 내부 스크롤 방지 */
    }
    footer {
        /* 스크롤 하단이 아닌, 현재 보이는 화면 바닥에 강제 고정 */
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-top: 0; /* 기존 auto 마진 무효화 */
        
        /* 배경 그라데이션이 바닥에서 더 잘 보이도록 농도 조절 (선택사항) */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    }
}