/* =========================================

   1. 기본 초기화 및 폰트 설정

   ========================================= */

* {

    box-sizing: border-box; /* 패딩/테두리가 너비에 포함되도록 설정 */

}



body, html {

    margin: 0;

    padding: 0;

    width: 100%;

    height: 100%; /* 브라우저 높이를 꽉 채움 */

    font-family: 'Helvetica Neue', Arial, sans-serif;

    background-color: #121212; /* 이미지 로드 실패 시 보일 배경색 */

    color: #ffffff;

    overflow: hidden; /* 불필요한 스크롤바 제거 */

}



/* =========================================

   2. 메인 섹션 & 배경 레이어 (이미지 안 나오는 문제 해결)

   ========================================= */

.main-section {

    position: relative; /* 자식 요소(레이어)들의 기준점 */

    width: 100%;

    height: 100vh; /* 화면 전체 높이 고정 */

}



.bg-layer {

    position: absolute; /* 겹쳐지게 설정 */

    top: 0;

    left: 0;

    width: 100%;

    height: 100%; /* 부모(.main-section) 높이를 100% 채움 */

    

    /* 배경 이미지 스타일링 */

    background-size: cover;      /* 비율 유지하며 꽉 채우기 */

    background-position: center; /* 중앙 정렬 */

    background-repeat: no-repeat;

    z-index: 1; /* 가장 뒤쪽 */

}



/* 배경 위를 덮는 반투명 검정 막 (글자 가독성 확보) */

.overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.4); /* 투명도 40% 검정 */

    z-index: 2;

}



/* =========================================

   3. 텍스트 및 콘텐츠 레이어 (중앙 정렬)

   ========================================= */

.text-layer {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%); /* 정확한 정중앙 배치 */

    z-index: 10; /* 배경보다 무조건 위에 오도록 설정 */

    text-align: center;

    width: 100%;

    padding: 0 20px;

}



/* 밴드 이름 타이틀 */

h1 {

    font-size: 3rem; /* 큼직한 폰트 */

    font-weight: 700;

    margin-bottom: 50px; /* 버튼과의 간격 */

    letter-spacing: 4px; /* 자간 넓힘 */

    text-transform: uppercase;

    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); /* 텍스트 그림자 */

    

    /* 등장 애니메이션 */

    animation: fadeUp 1.2s ease-out; 

}



/* =========================================

   4. 플레이어 컨트롤 (버튼 디자인)

   ========================================= */

.player-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    

    /* 등장 애니메이션 (타이틀보다 살짝 늦게) */

    animation: fadeUp 1.2s ease-out 0.3s backwards;

}



#play-btn {

    /* 버튼 모양 및 크기 */

    width: 90px;

    height: 90px;

    border-radius: 50%; /* 원형 */

    background-color: transparent; /* 투명 배경 */

    border: 3px solid #ffffff;     /* 흰색 테두리 */

    

    /* 아이콘 정렬 */

    display: flex;

    justify-content: center;

    align-items: center;

    

    /* 스타일 */

    color: #ffffff;

    font-size: 36px;

    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 쫀득한 느낌의 전환 */

    outline: none;

}



/* 마우스 올렸을 때 (Hover) */

#play-btn:hover {

    background-color: #ffffff;

    color: #000000;

    transform: scale(1.1); /* 1.1배 커짐 */

    box-shadow: 0 0 25px rgba(255, 255, 255, 0.5); /* 빛나는 효과 */

}



/* 클릭했을 때 (Active) */

#play-btn:active {

    transform: scale(0.95); /* 살짝 눌림 */

    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);

}



/* 재생 아이콘 위치 미세 조정 */

.fa-play {

    margin-left: 6px; /* 삼각형 시각 보정 */

}



/* =========================================

   5. 애니메이션 키프레임

   ========================================= */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* =========================================

   6. 반응형 (모바일 화면 대응)

   ========================================= */

@media (max-width: 768px) {

    h1 {

        font-size: 2rem; /* 모바일에서 글자 크기 축소 */

        letter-spacing: 2px;

    }

    

    #play-btn {

        width: 70px;

        height: 70px;

        font-size: 28px;

        border-width: 2px;

    }

}